Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

django-crispy-forms input size

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?

like image 301
dani herrera Avatar asked Mar 30 '14 17:03

dani herrera


People also ask

Why use Django crispy forms?

Django-crispy-forms is an application that helps to manage Django forms. It allows adjusting forms' properties (such as method, send button or CSS classes) on the backend without having to re-write them in the template.

What is widget in Django?

A widget is Django's representation of an HTML input element. The widget handles the rendering of the HTML, and the extraction of data from a GET/POST dictionary that corresponds to the widget. The HTML generated by the built-in widgets uses HTML5 syntax, targeting <!


1 Answers

  • 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-*

like image 94
Fedor Avatar answered Oct 30 '22 17:10

Fedor