[Fixed]-Crispy-forms: add css class for one of the inputs

by

5👍

✅

I see two possibilities:

1. Use CSS

#div_id_name {
    font-weight: 0.8em;
}

2. Override the field template

You can override the field template of your field:

Field('field_name', template='my_field_template.html')

For a reference field template, see site-packages/crispy_forms/templates/bootstrap3/field.html.

(3. Waiting)

There’s an open issue on Github for this: https://github.com/maraujop/django-crispy-forms/issues/348

👤Danilo Bargen

6👍

To you helper layout:

self.helper.layout = Layout(
    Field('name'),
    Field('description'),

add css_class:

Field('field_name', css_class="controls col-md-8 col-xs-7")

Here is the docs link

👤Aaron Lelevier

5👍

The only way to get this working is not using some form.helpers.

My config is

    # from
    self.helper.form_class = 'form-horizontal'
    self.helper.label_class = "col-md-2"
    self.helper.field_class = "col-md-10"
    # -> to
    self.helper.form_class = 'form-vertical'
    #self.helper.label_class = "col-md-2"
    #self.helper.field_class = "col-md-10"
    Fieldset('Address',
                 Div(
                     #I need to set size for every field wrapped in a div
                     Div('tipo_logradouro', css_class="col-md-6"), 
                     Div('logradouro', css_class='col-md-6'),
                     css_class='row'
                 ),
     )

I know this old but I hope it helps someone.

👤Vantage

2👍

One way to add a custom css class to a crispy-forms Field would be to wrap it in a Div with a custom css_class attribute: 

from crispy_forms.layout import Layout, Div, Field

self.helper.layout = Layout(
    Div(
        Field('name'), css_class="my_fancy_class_name"
    ),
    Field('description'),
)

For example, now you can customize your Field with some css:

.my_fancy_class_name {
    font-size: 200%;  /* You can change the font size */
    color: green;    /* You can change the font color */
    display: none;  /* You can even hide the Field */
}
👤elke

1👍

I’ve solved it like this:

Field('name', wrapper_class="col-md-6"),
👤oscarmlage

1👍

I was having the same problem and looking in the field.html template, I found that there’s a thing called wrapper_class that you can use in this way:

Field('name', wrapper_class="col-md-8 col-xs-7")

You can find the documentation in this link https://django-crispy-forms.readthedocs.io/en/latest/layouts.html under the Field layout element.

👤Gonzalo Barrientos

0👍

Cant you wrap those fields in a div? Doesnt this solve your problem?

self.helper.layout = Layout(
    Div(Field('name',maxlength=20),css_class = 'controls col-md-8 col-xs-7'),
    Field('description'),
)
👤durdenk

Leave a comment