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

StackOverflow https://stackoverflow.com/questions/110378

Вопрос

Как изменить ширину элемента формы текстовой области, если я использовал 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;'}),
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top