目次
「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" %>