Изменение ширины элементов формы, созданных с помощью ModelForm в Django

Как изменить ширину элемента формы textarea, если я использовал ModelForm для его создания?

Вот мой класс продукта:

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

И код шаблона...

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

f - это действительный элемент формы...

Ответ 1

Самый простой способ для использования - использовать CSS. Это язык, предназначенный для определения презентации. Посмотрите на код, сгенерированный формой, обратите внимание на идентификаторы для интересующих вас полей и измените внешний вид этих полей с помощью CSS.

Пример для поля long_desc в вашем ProductForm (когда ваша форма не имеет пользовательского префикса):

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

Второй подход - передать ключевое слово attrs вашему конструктору виджета.

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

Он описан в документации Django.

Третий подход заключается в том, чтобы оставить приятный декларативный интерфейс newforms некоторое время и установить атрибуты виджета в пользовательский конструктор.

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

Этот подход имеет следующие преимущества:

Вы можете определить атрибуты виджета для полей, которые автоматически генерируются из вашей модели без переопределения целых полей.
Это не зависит от префикса вашей формы.

Ответ 2

Отличный ответ zuber, но я считаю, что в примере кода для третьего подхода есть ошибка. Конструктор должен быть:

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

Объекты Field не имеют атрибутов attrs, но их виджеты.

Ответ 3

Если вы используете надстройку типа Grappelli, которая сильно использует стили, вы можете обнаружить, что любые переопределенные атрибуты row и col игнорируются из-за селекторов CSS, действующих на ваш виджет. Это может произойти при использовании превосходного второго или третьего подхода zuber.

В этом случае просто используйте первый подход, смешанный либо с вторым, либо с третьим подходом, установив атрибут "style" вместо атрибутов "rows" и "cols".

Здесь приведен пример, в котором init был изменен в третьем подходе выше:

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;'