I'm using https://github.com/dyve/django-bootstrap3 plugin for my project with following code
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="text-center">
<h1>{% block header_text %}{% endblock %}</h1>
<form method="post" class="form-inline">
{% csrf_token %}
Input: {% bootstrap_field form.input layout='inline' %}
Object: {% bootstrap_field form.object layout='inline' %}
<input type="submit" class="btn btn-xs btn-primary" value="Submit"/>
</form>
</div>
</div>
</div>
And get this fields as result How can i control width of them?
I tried to change it in .css file, but it only works with focus .form-control:focus {width: 320px}
Solved by addition "id": "input-form" to form widget and adjusting #input-form in .css file.
Related
I have a basic django website running on a postgres database.
The login page code was structured as follows,
{% extends "_base.html" %}
{% load crispy_forms_tags %}
{% block title %}Log In{% endblock title %}
{% block content %}
<h2>Log In</h2>
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-4">
<form method="post">
{% csrf_token %}
{{ form | crispy }}
<button class="btn btn-primary " type="submit">Log In</button>
</form>
</div>
</div>
</div>
{% endblock content %}
and _base.html as
<!-- additional css content for navbar -->
<div class="container-fluid full-height p-0">
{% block content %}
{% endblock content %}
<!-- similar footer content -->
And then I decided to add some css from the bootstrap in the form of a just so my login page would look cleaner. Therefore I added some css in this form.
{% extends "_base.html" %}
{% load crispy_forms_tags %}
{% block title %}Log In{% endblock title %}
{% block content %}
<div class="bg-dark vh-100 d-flex align-items-center justify-content-center">
<div class="col-3 p-5 border bg-light rounded-2">
<h2>Log In</h2>
<form method=" post">
{% csrf_token %}
{{ form | crispy }}
<button class="btn btn-primary " type="submit">Log In</button>
</form>
</div>
</div>
{% endblock content %}
with _base.html as follows
<div class="container-fluid p-0">
{% block content %}
{% endblock content %}
</div>
As you can see my I haven't touched the form "component". Why is the form not working?
Note: I have configured my static files properly, i.e directories mentioned in settings.py
I had setup to redirect to the home page, but the link that is getting passed in to the url is:
http://localhost:8000/accounts/login/?csrfmiddlewaretoken=XgEmrXg1fMJfOoPSnDyuY733MrWTxjaAWHnCnej9sFI6buue93sMgggrwIsTOibd&login=adminsav%40email.com&password=testpass123
<form class="text-center mt-5" action="{% url 'add' %}" method="post">
{% csrf_token %}
{% for field in form %}
<div class="row col-md-3 mx-auto mb-3">
{{field}} {% if not field.field.required %}<span class="text-light w-25">(optional)</span>
{% endif %}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Add</button></form>
So what happens is that the button is centered but the fields are a little to the left.
how do I make it so that the fields are centered and the (optional) span goes next to the ones that it has to go next to.
I would like to customize the Django login authentication form. The original form looks like this and it works perfectly:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4 ">Log In</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
My goal is to modify the form style so that I can place the objects wherever I want. I was able to achieve this for the username and password fields, however I cannot display the error message just like in the original format.
This is what I tried:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4 ">Log In</legend>
{% if formset.non_form_errors %}
<div class="alert alert-block alert-danger">
{% if formset_error_title %}<h4 class="alert-heading">{{ formset_error_title }}</h4>{% endif %}
<ul class="m-0">
{{ formset.non_form_errors|unordered_list }}
</ul>
</div>
{% endif %}
<div class="row">
<div class="col-md-4 col-sm-12 register-field">
{{ form.username|as_crispy_field }}
</div>
<div class="col-sm-12 register-field">
{{ form.password|as_crispy_field }}
</div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
Basically I saw that crispy uses a object called formset.non_form_errorshowever it looks like it is not working when I insert an invalid username/password.
Would you be able to suggest a smart and elegant way to achieve my goal please? This is what it should look like:
I was able to achieve my goal with this trick:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4 ">Log In</legend>
<div class="row">
<!-- Added this new rows -->
{% if form.errors %}
<div class="col-12 register-field">
<div class="alert alert-block alert-danger">
<ul>
<li>Please enter a correct username and password. Note that both fields may be
case-sensitive.
</li>
</ul>
</div>
</div>
{% endif %}
<!-- ------------------- -->
<div class="col-md-4 col-sm-12 register-field">
{{ form.username|as_crispy_field }}
</div>
<div class="col-sm-12 register-field">
{{ form.password|as_crispy_field }}
</div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
Basically I check if there are any errors and then I create a div with the custom error message.
I have django-bootstrap-datepicker-plus set up in my app. Upon completion, I noticed that my form fields are stacked on rows screenshot whereas I would love to manually render some of the fields on the same row. Although I know the reason for that is because the form is rendered using {% bootstrap_form form %}
Here is my rendered template code snippet below.
{% extends 'accounts/no_header_footer.html' %}
{% block content %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ form.media }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<div class="profile-create-form-container">
<form class="profile-create-form" data-certificates-url="{% url 'ajax_load_certificates' %}"
data-grades-url="{% url 'ajax_load_grades' %}"
data-relationships-url="{% url 'ajax_load_relationships' %}" data-states-url="{% url 'ajax_load_states' %}"
enctype="multipart/form-data"
id="ProfileCreateForm"
method="POST" runat="server">
{% csrf_token %}
<fieldset class="form-group text-center">
<span class="navbar-brand">
<img alt="..." height="40px" src="..." width="40px">
Basic Information
</span>
</fieldset>
{% bootstrap_form form %}
<div class="container">
<div class="text-center">
<button class="btn btn-dark" type="submit">
<i class="fa fa-save"></i> Save and Continue
</button>
</div>
</div>
</form>
</div>
The question I have is, is it possible to render each form field manually?
I was able to solve this issue by using {% bootstrap_field field %} as explained in this doc
I am facing a problem building a django project:
the pull-right class in bootstrap 3 didn't work in django template pull-right
here is my code
{% block content %}
<div class="row">
<div class="col-sm-4 pull-right">
<h1>{{ title }}</h1>
<form method="POST" action="">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-primary" type="submit" value="Sign Up!">
</form>
</div>
</div>
{% endblock content %}
Put a div inside your column and apply the pull-right class on that one.
<div class="col-sm-4">
<div class="pull-right">
<!-- content here -->
</div>
</div>
Why are you using columns if you want to pull it right?