CODEWITHSUNDEEP
djangodjango-crispy-forms
Barranka
Barranka

Reputation: 21057

Django crispy forms: Controls do not fill entire layout horizontally

I'm learning how to use Crispy Forms, following Vitor Freitas' tutorial.

However, when pasting his exact code in a form and in a template, the text boxes do not fill horizontally the space as intended.

The code (copied from Vitor's site):

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit, Row, Column

STATES = (
    ('', 'Choose...'),
    ('MG', 'Minas Gerais'),
    ('SP', 'Sao Paulo'),
    ('RJ', 'Rio de Janeiro')
)

class AddressForm(forms.Form):
    email = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Email'}))
    password = forms.CharField(widget=forms.PasswordInput())
    address_1 = forms.CharField(
        label='Address',
        widget=forms.TextInput(attrs={'placeholder': '1234 Main St'})
    )
    address_2 = forms.CharField(
        widget=forms.TextInput(attrs={'placeholder': 'Apartment, studio, or floor'})
    )
    city = forms.CharField()
    state = forms.ChoiceField(choices=STATES)
    zip_code = forms.CharField(label='Zip')
    check_me_out = forms.BooleanField(required=False)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Row(
                Column('email', css_class='form-group col-md-6 mb-0'),
                Column('password', css_class='form-group col-md-6 mb-0'),
                css_class='form-row'
            ),
            'address_1',
            'address_2',
            Row(
                Column('city', css_class='form-group col-md-6 mb-0'),
                Column('state', css_class='form-group col-md-4 mb-0'),
                Column('zip_code', css_class='form-group col-md-2 mb-0'),
                css_class='form-row'
            ),
            'check_me_out',
            Submit('submit', 'Sign in')
        )

Intended layout:

Vitor Freitas' tutorial output

Actual result in my experiment:

My rendered page

The HTML code:

<!DOCTYPE html>
{% load static %}

<html lang='sp'>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <title>
            {% block title %}
            Page title
            {% endblock title %}
        </title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" href="{% url 'home'%}">
                    <img src="{% static 'img/blc_logo.jpg'%}" 
                         alt="Logo" 
                         height="40em"/>
                    My awesome page
                </a>
                <button class="navbar-toggler" 
                        type="button" 
                        data-toggle="collapse" 
                        data-target="#mainMenu" 
                        aria-controls="mainMenu" 
                        aria-expanded="false" 
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="mainMenu">
                    {% if user.is_authenticated %}
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" 
                               href="#" id="userMenu" 
                               data-toggle="dropdown" 
                               aria-haspopup="true" aria-expanded="false">
                                {{ user.username }}
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" 
                                 aria-labelledby="userMenu">
                                {% if user.is_type_one %}
                                <a class="dropdown-item" 
                                   href="{% url 'type_one:home' %}">
                                    My panel
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">
                                    My account
                                </a>
                                {% elif user.is_type_two %}
                                <!-- TODO: create type_two menu -->
                                {% endif %}
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" 
                                   href="{% url 'logout' %}">
                                    Log out
                                </a>
                            </div>
                        </li>
                    </ul>
                    {% else %}
                    <form class="form-inline ml-auto">
                        <a class="btn btn-secondary" 
                           href="{% url 'login' %}">
                            Log in
                        </a>
                        <a class="btn btn-primary" 
                           href="{% url 'users:signup' %}">
                            Sign up
                        </a>
                    </form>
                    {% endif %}
                </div>
            </div>
        </nav>

        <div class="container">
            <ol class="breadcrumb my-4">
                {% block breadcrumb %}
                {% endblock breadcrumb %}
            </ol>
            {% block content %}
            {% endblock content %}
        </div>
        <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
        <script src="https://unpkg.com/@popperjs/core@2"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
    </body>
</html>

{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}

{% crispy form_test %}

{% endblock content %}

So... I don't know what I'm missing. Can you point me in the right direction?

Upvotes: 1

Views: 927

Answers (1)

Lucas Moeskops
Lucas Moeskops

Reputation: 5443

The tutorial sets a setting CRISPY_TEMPLATE_PACK = 'bootstrap4'. Maybe you use a different bootstrap version, or forgot to set this setting?

Upvotes: 1

Related Questions