Why django forms shows input in row instead of a column

[Adamu-Abdulkarim-Dee]

0

I wonder why django modelForm shows input in a row instead of a column like this:

I like all input in my model to be in a column when putting {{ form|crispy}} in the template, as you can see in the template, even if add col-md-3 to resize the input in a col it does not work, I think there is something I need to know about django-forms.

template:

--- Bootstrap-5

<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-3">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{ form|crispy}} 
                    <button type="submit" class="btn btn-primary">Create Student</button>
                </form>
            </div>
        </div>
    </div>

The Result:

My Forms.py file:

class PrimaryForms(forms.ModelForm):
    signature_of_student = JSignatureField(
        widget=JSignatureWidget(
            jsignature_attrs={'color':'#e0b642', 'height':'200px'}
            )
            )
    
    signature_of_guardian = JSignatureField(
        widget=JSignatureWidget(
            jsignature_attrs={'color':'#e0b642', 'height':'200px'}
            )
            )
    date_of_birth = forms.DateField(widget=forms.DateInput(attrs={'type': 'date'}))

    class Meta:
        model = Primary
        fields = ['admission_number', 'profile_picture', 'first_name', 
        'last_name', 'gender', 'address_of_student', 'class_Of_student', 
        'comment_of_student', 'year_of_graduation', 'date_of_birth', 'religion', 'mother_name]

[KenWhitesell]

This isn’t about django forms, it’s about using crispy.

• Instead of using the crispy filter, use the crispy tag.

• Read up on crispy layouts.

And to be clear, these are items in a row:

field 1         field 2        field 3        field 4

These are items in a column:

field 1
field 2
field 3
field 4

[Adamu-Abdulkarim-Dee]

Thanks for enlightened me about that. Will you please go through the documentation, i found it harder to understand an use in the forms.py and template. This is my first time working with Crispy Layout.

Thanks.

[KenWhitesell]

What I suggest you do is try working with it by following the docs with a minimal example. Try creating form with only three or four fields and play with the helpers and layout objects.

Also, you might do a web search for blogs that have posted articles about Crispy forms - there’s a lot of stuff out there.

When you do have some code but are still having problems that you can’t resolve, feel free to post that code here and we can help you debug it.

[Adamu-Abdulkarim-Dee]

I did what you have said Ken. But at this time, the question was on stack overflow: Here

[Adamu-Abdulkarim-Dee]

I solve my problem using django-crispy-layout ROW and COLUMN in the forms.py file:

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column

class PrimaryForms(forms.ModelForm):
    signature_of_student = JSignatureField(
        widget=JSignatureWidget(
            jsignature_attrs={'color':'#e0b642', 'height':'200px'}
            )
            )
    signature_of_guardian = JSignatureField(
        widget=JSignatureWidget(
            jsignature_attrs={'color':'#e0b642', 'height':'200px'}
            )
            )
    date_of_birth = forms.DateField(widget=forms.DateInput(attrs={'type': 'date'}))
    class Meta:
        model = Primary
        fields = ['admission_number', 'profile_picture', 'first_name', 
        'last_name', 'gender', 'address_of_student', 'class_Of_student', 
        'comment_of_student', 
'year_of_graduation', 'date_of_birth', 'religion', 'mother_name', 'signature_of_student', 
'relationship', 'signature_of_guardian']
        def __init__(self, *args, **kwargs):
            super().__init__(*args, **kwargs)
            self.helper = FormHelper()
            self.helper.form_method = 'post'
            self.helper.form_class = 'form-horizontal'
            self.helper.label_class = 'col-md-3'
            self.helper.field_class = 'col-md-9'
            self.helper.layout = Layout(
                Row(
                    Column('admission_number', css_class='form-group col'),
                    Column('profile_picture', css_class='form-group col'),
                    Column('first_name', css_class='form-group col'),
                    Column('last_name', css_class='form-group col'),
                    Column('gender', css_class='form-group col'),
                    Column('mother_name', css_class='form-group col'),
                    Column('signature_of_student', css_class='form-group col'),
                )
            )

I also change this form from:

        {% load crispy_forms_tags %}
        <div class="container">
            <div class="row justify-content-center">
                <div class="col">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% crispy form %}
                            <br>
                        <button type="submit" class="btn btn-primary">Create Student</button>
                    </form>
                </div>
            </div>
        </div>

To This:

{% load crispy_forms_tags %}
    <br>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="container">
            <div class="form-group row">
    
                <div class="col">
                    {{form.admission_number|as_crispy_field}}
                </div>
                
                <div class="col">
                    {{form.profile_picture|as_crispy_field}}
                </div>
    
                <div class="col">
                    {{form.first_name|as_crispy_field}}
                </div>
    
                <div class="col">
                    {{form.last_name|as_crispy_field}}
                </div>
    
            </div>
<div class="tex-center">
                <button type="submit" class="btn btn-primary btn-lg">Create Student</button>
            </div>
        </div>
    </form>

[KenWhitesell]

The changes to your template cause the Crispy formatting you put in your form to be ignored. You’re not using your helper.

You either want to use the Crispy helper to define your layout, or manually render the fields - but not both.

[Adamu-Abdulkarim-Dee]

So, what is the problems of using that method? Can you correct it?

[Adamu-Abdulkarim-Dee]

I do what you have said: I followed the tutorial by searching it on google.

Since this is the first time working with a crispy-form-layout and crispy-helper. Help me by correcting it, so that it would not cause bugs in the future.

[KenWhitesell]

The problem is that you made those changes to both your form and your template.

You only needed to make one of those changes, not both.

If you’re really going to use Crispy, you want to go back to the earlier template. (The one in your last post where you’re using {% crispy form %}, not the original one where you were using the filter.)

If you only want to use the filter and that newest template, then you can remove the helper and layout code because it’s not being used. (It’s not that it’s “wrong”, you’re just not using it.)

[Adamu-Abdulkarim-Dee]

It’s difficult to determine what specifically is considered “completely wrong” without any additional context, The form is being displayed in a template using Django’s template language.

Even using: {% crispy form %} in the template, the input does not do work. It does not shows all input in a row, and it also does not shows the input in the template.

[KenWhitesell]

@Adamu-Abdulkarim-Dee

Even using: {% crispy form %} in the template, the input does not do work. It does not shows all input in a row, and it also does not shows the input in the template.

You have:

@Adamu-Abdulkarim-Dee

self.helper.field_class = 'col-md-9'

How many bootstrap columns defined as col-md-9 can you fit on one row?

You’re going to need to do some experimenting with this to see what’s going to work for you.

In general, you’re on the right track, but it’s not practical for us to try and match up the exact results you might be looking for from the code that can be posted here.

Again, I’m going to suggest that you simplify the situation a bit until you get used to working with these layout elements. Start with maybe 3 or 4 fields, and try different options to see what happens.

[Adamu-Abdulkarim-Dee]

Ken Whitesell:
How many bootstrap columns defined ascol-md-9can you fit on one row?

Answer*:

One row can fit 12 / 9 = 1.33 col-md-9 bootstrap columns.

[KenWhitesell]

Yea, except that bootstrap doesn’t allow columns to be split.

In other words, the way you have these defined, you can only fit one field on each row which is why they’re all getting lined up in a single column.

[Adamu-Abdulkarim-Dee]

Ken:

that bootstrap doesn’t allow columns to be split.

answer:

Bootstrap’s grid system uses a fixed width and equal-width columns to ensure consistency across devices and screen sizes. Splitting columns would violate this principle and disrupt the design’s intended layout.

I don’t care because the website does not
designed for mobile friendly.

[KenWhitesell]

It doesn’t matter what you care about.

You’re using bootstrap’s grid system. It’s going to format it the way it wants.

[Adamu-Abdulkarim-Dee]

As long as it works.

I will use it later.

Thanks for Your Help sir.