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

Posted 2021-04-24

如果我使用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是实际的形式元素......

答案

您的用例最简单的方法是使用CSS。它是用于定义演示文稿的语言。查看表单生成的代码，记下您感兴趣的字段的ID，并通过CSS更改这些字段的外观。

ProductForm中long_desc字段的示例（当您的表单没有自定义前缀时）：

#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。

第三种方法是将新形式的良好声明性接口暂时保留，并在自定义构造函数中设置窗口小部件属性。

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选择器会对您的小部件起作用。当使用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;'

另一答案

在管理模型视图中设置行和css类：

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