I have input fields that lower label when something has been typed in it.
paste bin css
<div class="form__group">
<input type="text" class="form__input" id="name" placeholder="Full name" required=""
autocomplete='off' />
<label for="name" class="form__label">Full Name</label>
</div>
But, when I use django forms, they don't work at all
<div class="form__group col">
{{createSet.title}}
<label for="id_title" class="form__label">Title</label>
</div>
Related
I am working with Django templets and I am trying to create a beautiful login page.
I want to use this snippet to beautify my login page input fields.
<div class="form-label-group">
<input type="username" id="inputuser" class="form-control" placeholder="Email address" required autofocus>
<label for="inputuser">Username</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
</div>
where should I keep my {{form.username}} and {{form.password}} in the above snippet
The input fields UI should look like :
But my UI looks like :
my urls.py has :
path('login/', auth_views.LoginView.as_view(template_name='post/login.html'), name='login'),
Where should i add the form fields so that i can get the desired UI for my input fields
The {{form.username}} will go inplace of input type="username" and {{form.password}} inplace of input type password this will create default email boxes.
If you want to use your own UI just make sure, the input html element has corresponding name="username" and name="password" as an attribute.
<div class="form-label-group">
<input type="username" id="inputuser" name="username" class="form-control" placeholder="Email address" required autofocus>
<label for="inputuser">Username</label>
</div>
<div class="form-label-group">
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
</div>
By using django-widget-tweaks I was able to create this beautiful login page.
We just need to add the class name to the render_field
Tweak the form field rendering in templates, not in python-level form definitions. Altering CSS classes and HTML attributes are supported.
That should be enough for designers to customize field presentation (using CSS and unobtrusive javascript) without touching the python code.
The changes which I made are:
{% load widget_tweaks %}
<div class="form-label-group">
{% render_field form.username placeholder=form.username.label class+="form-control" %}
<label for="id_username">User name</label>
</div>
<div class="form-label-group">
{% render_field form.password placeholder=form.password.label class+="form-control" %}
<label for="id_password">Password</label>
</div>
widget_tweak is an excellent solution. Here are the steps to install.
pip install django-widget-tweaks.
add 'widget_tweaks' to APPLICATION_INSTALLED in settings.py.
use in template.
{% load widget_tweaks %}
Good day,
In Django project I have an html file with a div in which some fields(like p) change the content by radiobutton choice (using JavaScript).
Need to turn the div with the changed content (by radiobutton choice) into pdf and doc (with saving of all styles).
Any help is appreciated.
I tried "wkhtmltopdf" but it generates pdf only with model contents from db and without result of radiobutton work.
<!--Choice radiobuttons-->
function Display(obj) {
fioid=obj.id;
if(fioid=='exampleRadios1'){
document.getElementById("fiz").style.display='block';
document.getElementById("ip").style.display='none';
document.getElementById("ur").style.display='none';
} else if(fioid=='exampleRadios2'){
document.getElementById("ip").style.display='block';
document.getElementById("fiz").style.display='none';
document.getElementById("ur").style.display='none';
} else if(fioid=='exampleRadios3'){
document.getElementById("ur").style.display='block';
document.getElementById("fiz").style.display='none';
document.getElementById("ip").style.display='none';
}}
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios1" value="FIZ" onclick="Display(this);" checked>
<label class="form-check-label" for="exampleRadios1">
FIZ
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios2" value="IP" onclick="Display(this);">
<label class="form-check-label" for="exampleRadios2">
IP
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios"
id="exampleRadios3" value="UR" onclick="Display(this);">
<label class="form-check-label" for="exampleRadios3">
UR
</label>
</div>
</div>
<div>
<p style="text-align: justify; font-family: Times New Roman;">
<span style='display: block;' id="fiz">This is FIZ</span>
<span style='display: none;' id="ip">This is IP</span>
<span style='display: none;' id="ur">This is UR</span>
</p>
<div>
This is may be answer to the question.
https://www.codexworld.com/export-html-to-word-doc-docx-using-javascript/
A login form is submitted and when I try and dump the values the form structure is empty in IE but not FF or Chrome. This is in a DEV environment using HTTPS and a corporate self signed certificate.
I don't really think this is Fusebox related but it is the framework I'm using. No choice in the matter as it is legacy code and no budget to change it so please don't suggest I move on.
I've discovered that in IE it doesn't like the form action to be of the format:
/directory/index.cfm?fuseaction=app.Security
Instead it wants a fully qualified action
https://www.mycompany.com/directory/index.cfm?fuseaction=app.Security
<form action="/directory/index.cfm?fuseaction=app.Security" name="loginForm" id="loginForm" method="post">
<div style="width:55%;" align="center" id="fieldset">
<fieldset class="border" style="width:70%;">
<legend>Login</legend>
<div style="padding:2%">
<label for="userID">User ID: <span id="error1" class="redbold" aria-live="assertive"></span> </label>
</div>
<div>
<span class="required">*</span> <input type="text" name="userID" id="userID" size="32" maxlength="8" value="" />
</div>
<div style="padding:2%">
<label for="pw">Password: <span id="error2" class="redbold" aria-live="assertive"></span></label>
</div>
<div>
<span class="required">*</span> <input type="password" name="pw" id="pw" size="32" maxlength="20" value="" />
</div>
<div style="padding:2%" id="formButtons">
<input type="submit" value="Login" class="buttonfield" title="Login to eAgenda" />
<span style="padding-left:5%; margin-left:5%">
<input type="reset" value="Clear" class="buttonfield" title="Clear" />
</span>
<div id="errorMsg">
<p>
<span class="redbold"></span>
</p>
</div>
</div>
<span class="required">*</span>Mandatory field
</fieldset>
</div>
</form>
In the end it was a <base href="http://..."/> tag in the header. Removing or making it https solved the problem.
I am using check box control in a simple django application. When I use the standard check box control, I can get the desired values in views.py. But I fail to get the values when I use bootstrap check box control. Logic seems to be fine, I don't know why it's not working. Can anybody point out the mistake, Thanks in advance.
Standard Way
<input type="checkbox" name="fruit" value="Apple"> Apple
<input type="checkbox" name="fruit" value="Mango"> Mango
Bootstrap Way
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Mango</label>
</div>
view.py
if request.method == 'POST':
fruit = request.POST.getlist('fruit')
You have set id="fruit" for both and for="fruit" for both.
Those need to be different for different checkboxes.
Also, the values were set to empty in your case.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Apple" id="apple">
<label class="form-check-label" for="apple">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Mango" id="mango">
<label class="form-check-label" for="mango">Mango</label>
</div>
</div>
</div>
</div>
I've searched extensively on this site and tried my best, but cannot figure out how to put the label and input on the same line, right now, it displays like this:label and input box are on different lines
First, as people suggested, I grouped them using "form-group" class, but no luck. Then I continued to search, some says you should use "col-sm-1" which I tried, no luck, some says you should use "form-control-static", but still no luck. Any help is deeply appreciated!
<div class="tab-content">
<div class="row" id="create_new_spa_form">
<form method= "post" action ="/purchasing/item_info_new_spa/" onsubmit="javascript: return validate();">
<div class="span4">
<div class="form-group">
<label class="control-label col-sm-1" for="input01">Text input</label>
<div class="controls col-sm-1">
<input type="text" class="form-control-static" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
</form>
</div>
</div>
After making edits as ZimSystem suggested, now it looks like this:part of first label got truncated
How can I fix this? Also, how can I adjust the size of the input box? I don't need them to be so wide.
Use form-inline and remove the extra markup around the labels and inputs..
<form method="post" action="" class="form-inline">
<label for="input01">Text input</label>
<input type="text" class="form-control-static" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
</form>
http://www.bootply.com/7BrrI0uZiH
From the 2.x docs: http://getbootstrap.com/2.3.2/base-css.html#forms
add this to your form
class="form-inline"
more examples here about the Inline form... http://getbootstrap.com/css/#forms
hope this helps :)