Django Crispy_forms doesn`t load the correct layout

Question

I spent a few hours trying to debug this error but could not find out why. I don`t have any errors message.

Here is a screenshot: Crispy Form Displayed

I would like to display my form in two columns using the crispy forms layout.

Goal: Display the forms with the layout defined in the forms.py file Issue: The layout doesn`t display as expected and list all fields on different lines. Here is a screenshot of the forms ibb.co/nrwRmzT

forms.py

from crispy_forms.helper import FormHelper
from .models import Project
from django.core.exceptions import ValidationError
from crispy_forms.layout import Layout, Submit, Row, Column, ButtonHolder


class ProjectForm(forms.ModelForm):
class Meta:
    model = Project
    fields = ['type','chantier','description','company','contact','po_number','display_po','upload_po','proposal_ref','budget','system','notes']   
    labels = {
        "po_number": "Client PO Ref",
        "company": "Customer"
    }

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.layout = Layout( 
        Row(
            Column('type', css_class='form-group col-md-2 mb-0'),
            Column('chantier', css_class='form-group col-md-2 mb-0'),
            Column('description', css_class='form-group col-md-3 mb-0'),
            Column('system', css_class='form-group col-md-2 mb-0'),                
            css_class='form-row'
        ),                
        Row(
            Column('company', css_class='form-group col-md-3 mb-0'),
            Column('contact', css_class='form-group col-md-3 mb-0'),                
            css_class='form-row'
        ),
        Row(
            Column('proposal_ref', css_class='form-group col-md-2 mb-0'),
            Column('budget', css_class='form-group col-md-5 mb-0'),                
            css_class='form-row'
        ),
        Row(
            Column('po_number', css_class='form-group col-md-2 mb-0'),
            Column('upload_po', css_class='form-group col-md-2 mb-0'),
            Column('proposal_ref', css_class='form-group col-md-2 mb-0'),                
            css_class='form-row'
        ),
        Row(
            Column('notes', css_class='form-group col-md-20 mb-0'),                             
            css_class='form-row'
        ),
        Submit('submit', 'Sign in')
    )

Createproject.html

{% extends 'base.html' %}

{% load crispy_forms_tags %}
{% crispy form %}

{% block body %}


 <form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
      {% csrf_token %}                  
      {% crispy form %}                 
 </form>

{% endblock %}

Many Thanks

Answer 1

You need to assign the Row() data to the helper.layout

def __init__(self, *args, **kwargs):
    super(ProjectForm, self).__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.form_method = 'POST'

    self.helper.layout = Layout( 
        Row(
            Column('type', css_class='form-group col-md-6 mb-0'),
    [...]

Look here for similar sample code: https://simpleisbetterthancomplex.com/tutorial/2018/11/28/advanced-form-rendering-with-django-crispy-forms.html#crispy-forms-layout-helpers