How can form fields be rendered manually in django-bootstrap - django

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

Related

Login in django failing after adding css to login page

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

How to center form fields with bootstrap and django

<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.

Django Allauth Customized Login Template Not Working

I have customized the login template of allauth with bootstrap styles and widget_tweaks. When I try logging in with that template, It doesn't redirect me to the home page but remains in the same login.html template. However, when I log in with the original template from allauth in /account/login.html/ everything works well and it redirects me to my homepage. There is something that I'm not customizing right in my custom login.html template.
Below is django-allauth login.html and my custom login.html
django-allauth login.html
{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign In" %}</h1>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, sign up
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
<div class="login-or">{% trans 'or' %}</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
sign up first.{% endblocktrans %}</p>
{% endif %}
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
<button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>
{% endblock %}
my custom login.html
{% comment %}
{% extends "layouts/base-fullscreen.html" %}
{% load i18n %}
{% block title %} Login {% endblock %}
{% load widget_tweaks %}
{% block content %}
<div class="auth-wrapper">
<div class="auth-content">
<div class="auth-bg">
<span class="r"></span>
<span class="r s"></span>
<span class="r s"></span>
<span class="r"></span>
</div>
<div class="card">
<div class="card-body text-center">
<div class="mb-4">
<i class="feather icon-unlock auth-icon"></i>
</div>
<h3 class="mb-4">Login</h3>
<span class="mb-0 text-muted">
{% if msg %}
{{ msg | safe }}
{% else %}
Add your credentials
{% endif %}
</span>
<br />
<br />
<form method="post" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="md-form mb-2">
{% render_field form.login class="form-control" placeholder=form.login.label %}
</div>
<span class="text-error">{{ form.login.errors }}</span>
<div class="md-form mb-2">
{% render_field form.password class="form-control" placeholder=form.password.label %}
</div>
<span class="text-error">{{ form.password.errors }}</span>
<p class="mb-0 text-muted"><a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot password?</a>
</p>
<div class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<!-- <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked=""> -->
{% render_field form.remember class="form-control" placeholder=form.remember.label type="checkbox"%}
<label for="id_remember" class="cr"> Remember me</label>
</div>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit" name="login" class="btn btn-primary shadow-2 mb-4">Login</button>
</form>
<p class="mb-0 text-muted">Don’t have an account? <a href="{% url 'account_signup' %}" >Signup</a></p>
<br />
</div>
</div>
</div>
</div>
{% endblock content %}
allauth settings in settings.py
LOGIN_REDIRECT_URL = '/'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
SITE_ID = 1
ACCOUNT_LOGOUT_REDIRECT_URL = '/' #couterpart to Django's LOGIN_REDIRECT_URL
ACCOUNT_LOGOUT_REDIRECT = '/'
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_EMAIL_VERIFICATION = 'optional'
The other change I've made is to customize the allauth signup form to take extra two fields (first_name and last_name). That one works fine and redirects to the login url
you might be getting an error from the form validator. keep the original form on the page to check if its giving any errors. copy the {{ form.as_p }} from the original page 'accounts/login.html' and paste it in your custom template. if there are any errors, it'll display it.
this right here is your problem
{% extends "account/base.html" %}
If you have all the boostrap, jquery and widget_tweaks in your local base.html, then thats what you need to extend. The default accounts/base.html provided by django-allauth, does not come customized with bootstrap.
Use:
{% extends "base.html" %} instead

django-bootstrap3 fields width control

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.

Dynamic Formset with crispy forms and django-dynamic-formset not working

I'm trying to use the app django-dynamic-formset to allow users to add more than one media object at the end of a form.
I'm following the demo here.
https://github.com/elo80ka/django-dynamic-formset/blob/master/docs/usage.rst
I managed to get this to work but then changed to using crispy form and it's no longer working.
The "add another" text isn't appearing aver the first inline formset.
The template looks like this.
<form id="dtuForm" enctype="multipart/form-data" action="." method="post" >
{% csrf_token %}
{{ formset.management_form }}
{% crispy form %}
<fieldset class="" id="formaddtest" >
{% for formset in inlines %}
<div id = "media_object">
{% for subform in formset.forms %}
{{ formset.management_form }}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add Link / Downloadable File</h3>
</div>
<div class="panel-body">
{% crispy subform %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</fieldset>
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
I'm starting to suspect that I'm not putting the media_object selector in the right place but I'm not sure where to put it now that I'm using crispy forms so any help or pointers is useful to me.
Thanks