I have a bootstrap form which consists of basic input fields and a few textarea's. Im using Django for my form validation and am having a persistent problem aligning validation labels under the textarea's. This form is only using bootstrap css modules so there is no custom css interfering with it as far as i can tell.
Example: The date and time field align perfectly as the notes validation label does not.
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well well-lg">
<form class="form-horizontal" action="" autocomplete="off" method="post">
{% csrf_token %}
{% for field in UserForm %}
<div class="form-group">
<label class="col-md-4 control-label" for="{{ field.label }}"> {{ field.label }}</label>
<div class="col-md-6">
{{ field }}
</div>
{% for error in field.errors %}
<div class="col-md-6">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
</div>
{% endfor %}
</form>
</div>
</div>
</div>
The number of columns inside the class="row" does not add up to 12. Try rewriting the form-group part like this:
<div class="form-group">
<label class="col-md-4 control-label" for="{{ field.label }}"> {{ field.label }}</label>
<div class="col-md-6">
{{ field }}
{% for error in field.errors %}
<p>
<strong>{{ error|escape }}</strong>
</p>
{% endfor %}
</div>
</div>
Related
How to place each form of a formset on a horizontal line, one below the other without using a table?
My html is putting everything on one line.
Any help much appreciated.
Html
[<div class="form-group row">
<div class="row">
{{ formset.management_form }}
{% for form in formset.forms %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="col-sm-2">
{{ form.logical_operator|as_crispy_field }}
</div>
<div class="col-sm-3">
{{ form.event|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.operator|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.event_value|as_crispy_field }}
</div>
<div class="col-md-1 align-self-center delete-form">
<button onclick="exclude(this)" type="button"
title="Excluir"
class="btn btn-danger btn-sm">
<i class="feather icon-trash-2"></i>
</button>
</div>
{% endfor %}
</div>
</div>
image from screen
This reorganization solved the problem.
Thanks for the help!
<div class="form-group row">
<div class="col-sm-12">
{{ formset.management_form }}
{% for form in formset %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="row">
<div class="col-sm-2">
{{ form.logical_operator|as_crispy_field }}
</div>
<div class="col-sm-3">
{{ form.event|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.operator|as_crispy_field }}
</div>
<div class="col-sm-2">
{{ form.event_value|as_crispy_field }}
</div>
<div class="col-md-1 align-self-center delete-form">
<button onclick="exclude(this)" type="button"
title="Excluir"
class="btn btn-danger btn-sm">
<i class="feather icon-trash-2"></i>
</button>
</div>
</div>
{% endfor %}
</div>
</div>
Please try using </br> (break line) command:
<h1> HEllo</h1> </br> <h2>How are you</h2>
I want the checkboxes on the left side to be the same height as the text input boxes on the right.
HTML:
{% block content %}
<h1>{{ls.name}}</h1>
<form method="post" action="#">
{% csrf_token %}
{% for item in ls.item_set.all %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
{% if item.complete == True %}
<input type="checkbox", value="clicked", name="c{{item.id}}" checked>
{% else %}
<input type="checkbox", value="clicked", name="c{{item.id}}">
{% endif %}
</div>
</div>
<input type="text", value="{{item.text}}" class="form-control">
</div>
{% endfor %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="submit", name = "newItem", value="newItem" class="btn btn-primary">Add Item</button>
</div>
<input type="text", name="new">
</div>
<button type="submit", name = "save", value="save" class="btn btn-primary">Save</button>
</form>
{% endblock %}
give you check box class then in you linked css give checkbox height and width acc to your need
<div class="input-group-text">
{% if item.complete == True %}
<input class="check" type="checkbox", value="clicked", name="c{{item.id}}" checked>
{% else %}
<input class="check" type="checkbox", value="clicked", name="c{{item.id}}">
{% endif %}
then in your css
.check {
height:20px;
width:20px;
}
I am trying to save data in ORM via a form but when I click on the submit button all it does is refresh the page with the same data.
HTML
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy form %}
{% load widget_tweaks %}
{% block content %}
<h2 class="mb-3">Add a Warehouse</h2>
<div class="row">
<form method="post" class="col-md-12 proct-form" novalidate>
{% csrf_token %}
<div class="form-group col-md-4 mb-0">
{{ form.owner|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_name|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_email|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_contact|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_city|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_pincode|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_state|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_pan|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0">
{{ form.warehouse_gst|as_crispy_field }}
</div>
<div class="form-group col-md-12 mb-0">
<button type="submit" class="btn btn-success">Save</button>
Nevermind
</div>
</form>
</div>
{% endblock %}
Views.py
#method_decorator([login_required, employee_required], name='dispatch')
class WarehouseFormView(CreateView):
model = Warehouse
fields = "__all__"
template_name = 'packsapp/employee/warehouseForm.html'
def form_valid (self, form):
product = form.save(commit=False)
product.save()
messages.success(self.request, 'The Warehouse was created with success!')
return redirect('employee:warehouse_table')
Is there a problem with my views.py or do I need to change my templates?
All the other forms in the app are created the same way and they work fine
I created a sign up form by extending Django's UserCreationForm. Since Django adds all HTMLs by default I can't put my own HTML in it, just to customize it a bit.
This is how my current signup form looks like:
you can see password and password confirmation are added one after another. I would like to show them side by side, something like this:
I don't know where to add my HTML to make it look like the one above, this is my signup.html here:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
No one answered my question within last 36 hours. Finally just now I find an answer to my own question. So I am answering my own question, maybe someone in the future read it and find it useful.
After adding my custom HTML and CSS I finally manage to show two password fields side by side like this:
I used django-widget-tweaks to achieve this result:
as you can see in above picture, two password fields are added side by side. Moreover, errors are shown as well.
this was the previous html form:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
Now the HTML codes look like this one below, the code pretty much explains itself. So I don't feel to elaborate it. I used bootstrap 4.
{% block content %}
<div class="accountform">
<form method="POST">
<h4 class="display-6 text-white p-3">Create your account</h4>
{% csrf_token %}
<div class="alert alert-danger p-0" style="border:none;">
{% for field in form.visible_fields %}
{% for error in field.errors %}
<span class="err">{{ error }}</span><br>
{% endfor %}
{% endfor %}
</div>
<div class="form-group">
<label for="id_username">Username</label>
{% render_field form.username class='form-control' placeholder='John Doe' %}
</div>
<div class="form-group">
<label for="id_email">Email</label>
{% render_field form.email class='form-control' placeholder='johndoe#email.com' %}
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="id_password1">Password</label>
{% render_field form.password1 class='form-control' placeholder='****' %}
</div>
<div class="form-group col-md-6">
<label for="id_password2">Confirm Password</label>
{% render_field form.password2 class='form-control' placeholder='****' %}
</div>
</div>
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
</div>
</div>
{% endblock content %}
dont' forget to add {% load widget_tweaks %} at the top of your template.
Thanks
I am using textfields, radiobuttons, textarea etc in my form. The textfield size is very small and looks very bad:
How can I make slightly larger? How the height of text area is smaller than that of gender field?
Code is:
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
<div class='col-md-6'>
{% render_field form.name class="form-control" placeholder="Full Name" type="text" %}
{% if form.name.errors %}
<div class="alert alert-danger tpad">
{{ form.name.errors.as_text }}
</div>
{% endif %}
</div>
</div>
<!-- name ends here -->
{# Gender goes here #}
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
<div class='col-md-6'>
{% for radio in form.gender %}
{{ radio }}
{% endfor %}
{{form.gender.errors}}
</div>
</div>
<!-- enroll ment number -->
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_enrollment_number'>Enrollment Number</label>
<div class='col-md-6'>
{% render_field form.enrollment_no class='form-control' placeholder='Enrollment Number' type='text' %}
{% if form.enrollment_no.errors %}
<div class="alert alert-danger tpad">
{{ form.enrollment_no.errors.as_text }}
</div>
{% endif %}
</div>
</div>
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_faculty_name'>Faculty Name</label>
<div class='col-md-6'>
{% render_field form.faculty_name class='form-control' rows="1" cols="1" placeholder='Faculty Name' type='text' %}
{% if form.faculty_name.errors %}
<div class="alert alert-danger tpad">
{{ form.faculty_name.errors.as_text }}
</div>
{% endif %}
</div>
</div>
The code generated is:
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
<div class='col-md-6'>
<input class="form-control" id="id_name" maxlength="200" name="name" placeholder="Full Name" type="text" />
</div>
</div>
<!-- name ends here -->
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
<div class='col-md-6'>
<select id="id_gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
Solution: The text size rendered by bootstrap was 20px. I changed it manually to 40px, here:
.uneditable-input{display:inline-block;height:40px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}input,textarea,
Since your code generate an id for the name input, adding (or update) this rule in your CSS would do the trick
#id_name {
height: 30px; /* where you give it same height as your select */
}
Another way, more generic for your form elements (input text and select), could be like this
form-control select,
form-control input[type=text] {
height: 30px;
}
I think you should resize the box like: cols or you should make it as a textarea.
For example that part of the box:
{% render_field form.name class="form-control" cols="1" placeholder="Full Name" type="text" %}