web-dev-qa-db-ja.com

DjangoのModelFormで作成されたフォーム要素の幅を変更する

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は実際のフォーム要素です...

pythonhtmldjangodjango-formsdjango-templates
52
Josh Hunt

ユースケースの最も簡単な方法は、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のNice宣言インターフェースを離れ、カスタムコンストラクターでウィジェット属性を設定することです。

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

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

  • フィールド全体を再定義することなく、モデルから自動的に生成されるフィールドのウィジェット属性を定義できます。
  • フォームのプレフィックスに依存しません。
109
zuber

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」属性はありませんが、ウィジェットにはあります。

15
bryan

スタイルを多用するGrappelliのようなアドオンを使用している場合、CSSセレクターがウィジェットに作用するため、オーバーライドされたrowおよびcol属性が無視されることがあります。これは、上記のzuberの優れた2番目または3番目のアプローチを使用している場合に発生する可能性があります。

この場合、「行」属性と「列」属性の代わりに「スタイル」属性を設定することにより、第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;'
6
bergdesign

管理モデルビューで行とcssクラスを設定します。

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