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

2 番目の方法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 documentation で説明されています。

3 番目のアプローチは、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

このアプローチには、次の利点があります。

  • フィールド全体を再定義することなく、モデルから自動的に生成されるフィールドのウィジェット属性を定義できます。
  • フォームのプレフィックスには依存しません。
于 2008-09-21T06:44:02.057 に答える
17

zuberによる優れた回答ですが、3番目のアプローチのサンプルコードにエラーがあると思います。コンストラクターは次のようになります。

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 のようなアドオンを使用している場合、ウィジェットで動作する CSS セレクターが原因で、オーバーライドされた行と列の属性が無視されることがあります。これは、上記の zuber の優れた 2 番目または 3 番目のアプローチを使用した場合に発生する可能性があります。

この場合、'rows' および 'cols' 属性の代わりに 'style' 属性を設定することにより、2 番目または 3 番目のアプローチとブレンドされた 1 番目のアプローチを単純に使用します。

上記の 3 番目のアプローチで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 に答える