Question

According with django-crispy-form documentation, I will be able to change input width with class input-small. But my form always looks with width at 100%:

enter image description here

Also, If I add css_class to Field the size remains at width:100% ( .form-control )

I have set form as documentation explains:

class LoginForm(forms.Form):
    usuari = forms.CharField( help_text = u'Codi Usuari')
    paraula_de_pas = forms.CharField( help_text = u'Paraula de pas')

    # Uni-form
    helper = FormHelper()
    helper.form_class = 'form-horizontal'
    helper.label_class = 'col-lg-2'  
    helper.field_class = 'col-lg-8'  
    helper.layout = Layout(
        PrependedText('usuari', 
                      '<span class="glyphicon glyphicon-user"></span> ',  
                      css_class='input-small'),
        PrependedText('paraula_de_pas', 
                      '<span class="glyphicon glyphicon-asterisk"></span> ', 
                      css_class='input-small'),
        FormActions(
            Submit('save_changes', 'Entrar-hi', css_class="btn-primary"),
        )
    )

In settings:

CRISPY_TEMPLATE_PACK="bootstrap3"

I'm up to date version. What is wrong?

Was it helpful?

Solution

  • In bootstrap3 class name for small input box is input-sm
  • input-sm just sets size of the font and height of the field, it has nothing to do with field width.

form-horizontal, col-lg-2 and col-lg-8 make horizontal layout for the form (http://getbootstrap.com/css/#forms-horizontal). So first of all make sure your screen resolution to enough for lg. Try col-sm-*

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top