57

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

4

4 回答 4

123

您的用例最简单的方法是使用 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

它在 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

这种方法具有以下优点：

  • 您可以为从模型自动生成的字段定义小部件属性，而无需重新定义整个字段。
  • 它不依赖于表单的前缀。
于 2008-09-21T06:44:02.057 回答
17

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”属性，但它们的小​​部件有。

于 2009-03-12T22:02:52.053 回答
15

如果您使用像 Grappelli 这样大量使用样式的插件，您可能会发现任何被覆盖的 row 和 col 属性都会因为 CSS 选择器作用于您的小部件而被忽略。当使用上述 zuber 出色的第二种或第三种方法时，可能会发生这种情况。

在这种情况下，只需通过设置“样式”属性而不是“行”和“列”属性，将第一种方法与第二种或第三种方法混合使用。

这是在上面的第三种方法中修改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;'
于 2014-08-07T21:08:12.890 回答
1

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

'explicacion': AutosizedTextarea(attrs={'rows': 5, 'class': 'input-xxlarge', 'style': 'width: 99% !important; resize: vertical !important;'}),
于 2018-03-02T08:36:44.200 回答