Измените ширину элементов формы, созданных с помощью ModelForm в Django.
-
02-07-2019 - |
Вопрос
Как изменить ширину элемента формы текстовой области, если я использовал 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
это фактический элемент формы...
Решение
Самый простой способ для вашего варианта использования — использовать 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.
Третий подход заключается в том, чтобы на время оставить приятный декларативный интерфейс новых форм и установить атрибуты виджета в пользовательском конструкторе.
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
Этот подход имеет следующие преимущества:
- Вы можете определить атрибуты виджета для полей, которые автоматически генерируются из вашей модели, без переопределения целых полей.
- Это не зависит от префикса вашей формы.
Другие советы
Отличный ответ от 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, но их виджеты имеют.
Если вы используете надстройку, такую как Grappelli, которая интенсивно использует стили, вы можете обнаружить, что любые переопределенные атрибуты row и col игнорируются из-за селекторов CSS, действующих на ваш виджет.Это может произойти при использовании превосходного второго или третьего подхода Зубера, описанного выше.
В этом случае просто используйте первый подход, смешанный со вторым или третьим подходом, установив атрибут «стиль» вместо атрибутов «строки» и «столбцы».
Вот пример изменения в этом в третьем подходе выше:
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;'
Установите строку и класс CSS в представлении модели администратора:
'explicacion': AutosizedTextarea(attrs={'rows': 5, 'class': 'input-xxlarge', 'style': 'width: 99% !important; resize: vertical !important;'}),