改变宽度的形成元素，创造有ModelForm在Django

Question

我如何可以改变宽度的一个textarea形式的元素，如果我用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 是的实际形成元素...

Answer 1

最简单的方法使用的情况是使用CSS.这是一个语言意味着对定义的介绍。看看产生的代码形式，注意id领域，你的兴趣，并改变这些领域通过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文件.

第三种办法 是离开的好的声明的口的newforms一集你的部件属性的定义构造。

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;'

Answer 4

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

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