[FIXED] crispy-forms: add css class for one of the inputs

Issue

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 renders to

<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 just the name-input to be smaller, like this:

[...]
<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?

Solution

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

Answered By - Danilo Bargen