Djangoでformの幅を変更する方法

Djangoでformの幅を変更する方法をご紹介します。

条件

  • Django 2.1.7
  • Python 3.7.0

実装

forms.py

以下のようなformが定義されているものとします。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class SearchForm(forms.Form):
title = forms.CharField(
initial='',
label='タイトル',
required = False,
)
text = forms.CharField(
initial='',
label='内容',
required=False,
)
class SearchForm(forms.Form): title = forms.CharField( initial='', label='タイトル', required = False, ) text = forms.CharField( initial='', label='内容', required=False, )
class SearchForm(forms.Form):

    title = forms.CharField(
        initial='',
        label='タイトル',
        required = False,
    )
    text = forms.CharField(
        initial='',
        label='内容',
        required=False,
    )

css

forms.pyで定義した項目に「id_」を付けて、cssに記述します。
cssで定義した内容のテンプレートへの設定は不要です。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* フォーム入力 */
#id_title, #id_text {
width: 280px;
height: 32px;
}
/* フォーム入力 */ #id_title, #id_text { width: 280px; height: 32px; }
/* フォーム入力 */
#id_title, #id_text {
    width: 280px;
    height: 32px;
}

実行結果

適用前

適用後

適用前と比較してフォーム幅が伸びていることが分かります。

参考

stackoverflow

https://stackoverflow.com/questions/110378/change-the-width-of-form-elements-created-with-modelform-in-django

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です