I would like to have a file upload button for a models.ImageField. However, I don't want it to render with choose file:no file chosen. Instead, I would like a file upload button that pops up a select file button. Is this possible?
Not at all django related but the easiest way to do it is to add a hidden attribute to your input then style it accordingly:
<input type="file" id="upload" hidden/>
<label for="upload">Choose file</label>
label{
display: inline-block;
background-color: indigo;
color: white;
padding: 0.5rem;
font-family: sans-serif;
border-radius: 0.3rem;
cursor: pointer;
margin-top: 1rem;
}
Related
When I run the app in localhost, it works fine. but after deployed to pythonanywhere, Login with Facebook button doesn't work.
when I refresh Login page, in console, it shows =>
Failed to load resource: https://username.pythonanywhere.com/static/facebook/js/fbconnect.js the server responded with a status of 404 (Not Found)
Refused to execute https://username.pythonanywhere.com/static/facebook/js/fbconnect.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
in template:
<button class="effect" style="width: 100%; background-color: rgb(58, 110, 255); height: 36px; border: none; color: white; border-radius: 3px; display: flex; justify-content: center;align-items: center;"><img style="height: 24px; width: 24px; background-color: white; padding: 1px; border-radius: 50%;" src="{% static 'images/fblogo.png' %}" alt=""><span style="margin-top: 2px; display: block; margin-left: 8px; font-size: 16px;"> Login with Facebook</span></button> <br>
Another problem is: CSS doesn't load in admin page
how to fix this?
Edit: now if i click "Login with facebook" button, it shows, ReferenceError: Can't find variable: allauth
what to do now?😖
I am trying to set up a cookie policy pop-up on site.
I followed an online tutorial to the letter (I thought) but it doesn't work.
The banner shows up as expected, but on clicking accept, the page seems to refresh but no cookie is set and the banner is still there.
I have looked through the tutorial and all seems to be as he typed. Maybe someone could suggest what could be wrong.
The styles were placed in the css file, but I think the issue must be with the php. I have looked for alternative codes but they are so different I am not sure they would work with this method.
I wonder whether it has something to do with the isset commands.
Also, is there a way to ensure that when the cookie is set and is acknowledged that you stay on the same page rather than going to the root directory?
This is on the top of the html code i.e. before doctype
if (isset($_GET['accept-cookies'])) {
setcookie('accept-cookies', 'true', time() + 31557600);
header('Location: ./');
}
?>
This is the section with the banner (I like the way it looks so prefer not to change the style codes)
if (!isset($_COOKIE['accept-cookies'])) {
?>
<div class="cookie-banner">
<div class="cookie-container">
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: medium;">We use cookies to track usage and preferences. By using this website we will assume that you consent to their use as per our <u>Privacy and Cookie Policy</u>.</p>
<p style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 600; font-size: medium;">Okay</p>
</div>
</div>
<?php
}
?>
Just in case you need it, here are the css parts
background-color: #abd1ff;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
border: 2px solid #4a6894;
border-bottom: 2px solid #4a6894;
}
.cookie-banner {
background: #6c9bd3;
position: fixed;
top: 0;
left: 0;
width: 98%;
}
.cookie-banner .cookie-container {
margin: 0 auto;
width: 70%;
padding-bottom: 10px;
color: #1f2b3a;
padding: 15px;
}
I was going to add a slide down function, but when I added for it not to display initially in the css code, the banner disappeared even when the js file was referred to with the slide down code.
Any help on what I could add to make it work, what is missing, would be great.
THANK YOU!!!!
No error messages have been seen. Banner just won't disappear and cookie is not set.
I'm currently using Flask and I want to have a "Submit" button that will POST the data in a form to Python once the button is pushed.
MY text box looks like this:
<form method="POST"> <style>
textarea {
width: 100%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
My button looks like this:
<button type="submit"></button>
My run.py looks like this:
#app.route('/', methods=["POST"])
def some_function():
// do stuff
EDIT: I can't get the POST method to work. The button appears, and even when it is pressed, it does nothing.
you have your answer, but to others who will read this question later, and because you have so many mistakes in your pasted code that isn't going to make it any usable for others:
you should place the button inside the form, so your form would look like this:
<style>
textarea {
width: 100%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
</style>
<form method="POST">
<textarea name="textbox"></textarea>
<button type="submit" name="submit">Submit</button>
</form>
so you have a textarea and a button to send the form.
now, in your run.py:
#app.route('/', methods=["POST"])
def some_function():
text = request.form.get('textbox')
now, you can do whatever you like to text.
So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.
HTML CODE
<ion-content>
<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div>
</ion-content>
<ion-fab right bottom #fab>
<button ion-fab (click)="openFabButton()">
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<ion-label class="fablabelfriend">Friend</ion-label>
<button ion-fab>
<img src="assets/family_add.png">
</button>
<ion-label class="fablabelfamily">Family</ion-label>
</ion-fab-list>
</ion-fab>
Css File
.fablabelfamily
{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}
.fablabelfriend{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 30px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
#ListBackdrop{
background-color: white !important;
position: fixed !important;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8
}
TypeScript File
export class myClass{
fabButtonOpened: Boolean;
constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
this.fabButtonOpened=false;
//All other functions inside constructor
}
openFabButton(){
if(this.fabButtonOpened==false){
this.fabButtonOpened=true;
}else{
this.fabButtonOpened=false;
}
}
}
Anu's answer worked for me but the labels prevented me from clicking on my buttons.
I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.
<ion-fab-list side="top">
<ion-label class="fablabelfriend">Friend</ion-label>
<ion-label class="fablabelfamily">Family</ion-label>
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<button ion-fab>
<img src="assets/family_add.png">
</button>
</ion-fab-list>
</ion-fab>
Adding more to above fixes. You can make the labels clickable by
button[ion-fab] {
ion-label {
pointer-events: auto;
}
}
I'm using CSS3 inline in the html, and since images seem to be referenced by the css stylesheet location, how can I link to images without one?
When I do this:
<input type="image" name='voteup' value="Up" src="/index/images/ArrowUp.PNG"/>
It gives me a broken link of this value:
http://localhost/index/images/ArrowUp.PNG
and this:
.myButtonDown {
background:url('images/ArrowDown.PNG') no-repeat;
cursor:pointer;
width: 36px;
height: 36px;
border: none;
}
.....
<input type="submit" name='votedown2' value="Down2" class="myButtonDown"/>
Is just blank....
Use this and put your image in images folder.
.myButtonDown {
background: url( 'images/ArrowDown.PNG' ) no-repeat;
border: none;
cursor: pointer;
height: 36px;
width: 36px;
}
<input type="submit" name='votedown2' value="Down2" class="myButtonDown"/>