Change the width of form elements created with ModelForm in Django

Question

How can I change the width of a textarea form element if I used ModelForm to create it?

Here is my product class:

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

And the template code...

{% for f in form %}
    {{ f.name }}:{{ f }}
{% endfor %}

f is the actual form element...

Solution 1

The easiest way for your use case is to use CSS. It's a language meant for defining presentation. Look at the code generated by form, take note of the ids for fields that interest you, and change appearance of these fields through CSS.

Example for long_desc field in your ProductForm (when your form does not have a custom prefix):

#id_long_desc {
    width: 300px;
    height: 200px;
}

Second approach is to pass the attrs keyword to your widget constructor.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea(attrs={'cols': 10, 'rows': 20}))
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

It's described in Django documentation.

Third approach is to leave the nice declarative interface of newforms for a while and set your widget attributes in custom constructor.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

    # Edit by bryan
    def __init__(self, *args, **kwargs):
        super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
        self.fields['long_desc'].widget.attrs['cols'] = 10
        self.fields['long_desc'].widget.attrs['rows'] = 20

This approach has the following advantages:

• You can define widget attributes for fields that are generated automatically from your model without redefining whole fields.
• It doesn't depend on the prefix of your form.

Solution 2

Excellent answer by zuber, but I believe there's an error in the example code for the third approach. The constructor should be:

def __init__(self, *args, **kwargs):
    super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
    self.fields['long_desc'].widget.attrs['cols'] = 10
    self.fields['long_desc'].widget.attrs['cols'] = 20

The Field objects have no 'attrs' attributes, but their widgets do.

Solution 3

In the event that you're using an add-on like Grappelli that makes heavy use of styles, you may find that any overridden row and col attributes get ignored because of CSS selectors acting on your widget. This could happen when using zuber's excellent Second or Third approach above.

In this case, simply use the First Approach blended with either the Second or Third Approach by setting a 'style' attribute instead of the 'rows' and 'cols' attributes.

Here's an example modifying init in the Third Approach above:

def __init__(self, *args, **kwargs):
    super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
    self.fields['short_desc'].widget.attrs['style'] = 'width:400px; height:40px;'
    self.fields['long_desc'].widget.attrs['style']  = 'width:800px; height:80px;'

Solution 4

Set row and your css class in your admin model view:

'explicacion': AutosizedTextarea(attrs={'rows': 5, 'class': 'input-xxlarge', 'style': 'width: 99% !important; resize: vertical !important;'}),

View more solutions