はじめに
- オリジナルアプリ開発で発見したことについて、定着と備忘のためにまとめていきます。
結論
- CSS書けてるはずなのに変化がないときは、以下を確認してみよう
- class名が間違っていないか
- 記述したことが開発ツール上でも表示されているか
-
collection_selectのoptionとHTML属性には{}を付けよう
経緯
やりたいこと
-
collection_selectで作ったセレクトボックスのスタイリングをしたい
作成したコード(誤り)
# erbファイル
<div class="search-field">
<%= f.label :occupation_id, "職種", class:"search-label" %>
<%= f.collection_select(:occupation_id, Occupation.all, :id, :name, selected: @search_params[:occupation_id], include_blank: "選択しない", class:"search-occupation") %>
</div>
検索フォームの一部でoccupationモデルから選択出来るようにしています。
collection_selectの具体的な使い方はガイド内をご確認下さい → Railsドキュメント
オプションで下記のものを指定しています。
・ selected: → 遷移後に@search_paramsの値が選択されるようにしています
・ include_blank: → 初期状態(選択していない状態)の値を指定しています
次の箇所で問題が発生しました。
3行目のclass:search-occupationに対して下記のCSS記述しましたが、適用されませんでした。
# scssファイル
.search-occupation {
width: 100%;
padding: 8px 8px 5px;
outline: none;
}
開発ツールで確認すると、class:"search-occupation"が指定できていないことが分かりました。（画像3行目）
HTMLでclassが指定できていないため、CSSが無効になっている訳ということですね。
対応には下記の記事を参考にさせて頂きました。
ActionView::Helpers::FormOptionsHelper
【Rails】完全理解 formでセレクトボックスをつくるselectの使い方
railsでf.selectにclassを設定する
今回の対応
collection_selectについて調べていく中で、どうやら**optionとHTML属性には{}が必要と分かりました。(上述のコードのうち、引数の:nameより後ろの部分)
また、今回のようにoptionが2つある場合は、同じ{}内に記述する**必要があります。
- OK
{ selected: 〇〇, include_blank: 〇〇} - NG
{ selected: 〇〇},{include_blank: 〇〇}→ArgumentErrorでした
修正したコード
3行目を修正しています
<div class="search-field">
<%= f.label :occupation_id, "職種", class:"search-label" %>
<%= f.collection_select(:occupation_id, Occupation.all, :id, :name, {selected: @search_params[:occupation_id], include_blank: "選択しない"}, {class:"search-occupation"}) %>
</div>
おわりに
- 引数が多いhelperのため、まずは落ち着いてルールを確認したことでスムーズに解決出来ました。
- また、大元の検索機能はこちらの記事を参考にさせて頂きました。
- 初学者ゆえ、記事内に誤りがあるかもしれません。ご指摘等ありましたら、お手数ですがコメントを頂けると幸いです。