更改在Django中使用ModelForm创建的表单元素的宽度

Question

如果我使用ModelForm创建它,如何更改textarea表单元素的宽度？

这是我的产品类:

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.它是用于定义演示文稿的语言.查看表单生成的代码,记下您感兴趣的字段的ID,并通过CSS更改这些字段的外观.

long_descProductForm中字段的示例(当您的表单没有自定义前缀时):

#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

这种方法具有以下优点:

• 您可以为从模型自动生成的字段定义窗口小部件属性,而无需重新定义整个字段.
• 它不依赖于表单的前缀.

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优秀的第二或第三种方法时,可能会发生这种情况.

在这种情况下,只需使用第一种方法与第二种或第三种方法混合,方法是设置'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;'