Crispy-forms: add a css class for one of the inputs

Question

In my forms.py I have

 [...] self.helper.layout = Layout( Field('name'), Field('description'), ) self.helper.form_class = 'form-horizontal' self.helper.label_class = 'col-md-2 col-xs-3' self.helper.field_class = 'col-md-10 col-xs-9' [...] 

which displays

 <div id="div_id_name" class="form-group"> <label class="control-label col-md-2 col-xs-3 requiredField" for="id_name"> Name </label <div class="controls col-md-10 col-xs-9"> <input id="id_name" class="textinput textInput form-control" type="text" name="name" maxlength="20"> </div> </div> <div id="div_id_description" class="form-group"> <label class="control-label col-md-2 col-xs-3 requiredField" for="id_description"> Description </label> <div class="controls col-md-10 col-xs-9"> <textarea id="id_description" class="textarea form-control" rows="10" name="description" cols="40"></textarea> </div> </div> 

Now I would like only the name to be less, for example:

 [...] <div class="controls col-md-8 col-xs-7"> <input id="id_name" class="textinput textInput form-control" type="text" name="name" maxlength="20"> </div> </div> [...] 

(How) can this be achieved in crispy-forms ?

Answer 1

You auxiliary layout:

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

add css_class :

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

Below is the link.

Answer 2

I see two possibilities:

1. Use CSS

 #div_id_name { font-weight: 0.8em; } 

2. Replace 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 is an open issue on Github: https://github.com/maraujop/django-crispy-forms/issues/348

Answer 3

One way to add a custom css class to the crispy-forms field is to wrap it in a Div using the special 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 using 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 */ } 

Answer 4

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

My configuration

  # 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 hope this helps someone.

Answer 5

Can you wrap these fields in a div? Doesn't that solve your problem?

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

Answer 6

I solved it like this:

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