A Little Each Day

note to self

Railsのselectフォームでcssが効かない

こんにちは。本日はRailsでselectフォームにcssクラスを適用させる方法です。

selectフォームにclassを反映するにはちょっとしたTipsが必要です。

結構つまずいている人が多いので解決策を共有したいと思います。

前提

今回はあるモデル間同士でhas_manyとbelongs_toのアソシエーションがされている状態を想定してコードを書いています。

もちろんアソシエーションされていなくても、selectフォームにcssクラスを反映することはできるので、各々適時読み替えてください。


selectフォームにcssを書いてみる

以下のコードでアソシエーション先のnameをselectできる状態で、普通にselectフォームにcssクラスを適用するためにcssを指定しました。(今回の場合はbootstrapのform-controlクラスです。)

<%= f.collection_select :area_id, Area.all, "id", "name", class: "form-control" %>


普通ならこれでcssクラス(form-control)が適用されるはずですが、なぜか反映されなかった・・・


解決方法

selectフォームにcssを適応するためには以下のように書きます。

<%= f.collection_select :area_id, Area.all, "id", "name", {}, {class: "form-control"} %>


もし選択フォームに文字列 (「選択してください」・「エリアを選択」みたいな) を表示したい場合は以下のように指定します。

<%= f.collection_select :area_id, Area.all, "id", "name", {prompt: "エリアを選択"}, {class: "form-control"} %>


きちんとbootstrapのform-controlクラスと文字列が反映されていますね。

f:id:chi_kun:20170407173854p:plain



本日は以上です。