[Answered ]-How to force label line break using Django-crispy-forms

2👍

The HTML and CSS used to render the form may be defined by a template pack and a layout. By default when you don’t specify anything, crispy-forms uses the bootstrap template pack and the default layout. From what I can see, you are using the bootstrap3 template pack with the default layout. In that case you can do some basic alterations of the display using attributes of the FormHelper.

In fact this is what you are doing when setting these attributes:

    self.helper.label_class = 'col-lg-2'
    self.helper.field_class = 'col-lg-8'

With these two instructions you are saying that all labels should have the CSS class col-lg-2 and all fields should have the form col-lg-8. This is why the labels are on the left of the fields and take respectively 1/6th and 4/6th of the view (if you are using a 12 columns grid).
Since you want the labels and fields on separate lines, you can simply give a CSS class that takes the whole view width:

    self.helper.label_class = 'col-lg-12'
    self.helper.field_class = 'col-lg-12'

Note that if you want something responsive, you can leverage the power of the bootstrap grid. For example if you want fields on the same line as labels on large screens, and below labels on small screen, you could do:

    self.helper.label_class = 'col-md-4'
    self.helper.field_class = 'col-md-8'

You can even give several CSS classes to the field.

Leave a comment