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"/>
Related
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;
}
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 currently have a variable that contains a string HTML which resembles this
myvar = "<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style="font-size: xx-large; font-weight: 600; color: #5e9ca0;"> ..."
I am passing this string to my template like so
return render(request, "rendered.html", {
'result': myvar,
})
In the template I am simply doing
{{myvar}}
This shows me on the screen the exact html as text but not rendered. When I investigated the source this is what i got
<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style ...
while I was suppose to get
<p style="-qt-block-indent: 0; text-indent: 0px; margin: 18px 0px 12px 0px;"><span style="font-size: xx-large; font-weight: 600; color: #5e9ca0;">
Any solution on how I can fix this issue ?
What is happening ?
Django by default is escaping your html thinking that it might be harmful hence escaping it by default.
Since you need to NOT escape it. Wrap your variable within autoescape filter
{% autoescape off %}
{{ myvar}}
{% endautoescape %}
So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}
If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.