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

Question

Как изменить ширину элемента формы 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 фактический элемент формы ...

Answer 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 

Это described in Django documentation.

Третий подход должен оставить приятный декларативный интерфейс 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 

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

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

Answer 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», но их виджетов.

Answer 3

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

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

Вот пример модификации инициализации в третьем подходе выше:

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

Answer 4

Набор строк и ваш класс CSS с вашей точки зрения администратора модели:

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