【Rails】「collection_select」で設定したセレクトボックスに「CSS」が反映されない場合の対処方法!

目次

「CSS」が反映されない

「collection_select」タグを使用してCSSの「class」を設定しようとしたのですが、反映されずに困ったため書き残します。

<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, autocomplete: "prefecture_code", class:"form-control form-control-sm col-lg-5" %>

対処方法

結論から言うと、「prompt」が必要でした。

<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, { prompt: '選択してください' }, autocomplete: "prefecture_code", class:"form-control form-control-sm col-lg-5" %>

ここでは、{ prompt: ‘選択してください’ } を記載しています。
セレクトの最初の表示に「選択してください」が表示されるようになります。

「prompt」は絶対に必要?

ここで疑問に思うのが、
「select_collectionでclassを設定するには、promptを絶対に設定しないといけないの?」ということです。


もちろん、promptを無効にした状態でclassを設定する方法があります。
「prompt」の値を「false」にすればOKです。

 { prompt: false }

なので、実際には、とった形で設定することにより、CSSを適用させることができます。

<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, { prompt: false }, autocomplete: "prefecture_code", class:"form-control form-control-sm col-lg-5" %>
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次