How to change the width of form elements created with ModelForm in Django

Question

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.

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

Answer 1

Hello @kartik,

The easiest way for your use case is to use CSS. It's a language meant for defining presentation. 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;
}

Hope it helps!!

Thank You!!