こんにちわ!
現在車のレビューサイトをオリジナルアプリとして開発しており、
そこのレビュー検索機能ですこし悩んでしまった箇所がありましたのでアウトプットも兼ねて記事を書きたいと思います。
開発環境
Rails 6.0.0
BootStrap導入済み
今回の問題点
views/review/index.html.erb
<div class="container">
<div class="heading">
<p class="heading-text">レビュー検索</p>
</div>
<%= search_form_for @p, url: search_reviews_path do |f| %>
<div class="col-md">
<div class="form-group">
<label class="control-label">車種名</label>
<%= f.collection_select(:model_of_car_eq, @review_model_of_car, :model_of_car, :model_of_car, include_blank: '指定なし', class:"form-control") %>
</div>
<div class="btn btn-default">
<%= f.submit '検索', class:"btn btn-primary"%>
</div>
</div>
<% end %>
</div>
今回は上記コードのような形でindexページに検索フォームを実装していました。
それで出来上がったのが下記です。
検索ボックスちっさw なんでBootStrapのCSSが反映されていないんだ…
<%= f.collection_select(:model_of_car_eq, @review_model_of_car, :model_of_car, :model_of_car, include_blank: '指定なし', class:"form-control") %>
このcollection_select要素の引数としてclass指定しているにも関わらず反映がされていませんでした。
検索で調べるもいまいちピンとくる記事がなく悩んでしまいました。
解決方法
実はめちゃめちゃ単純だったんです…
同じアプリの別のページでこんな記述をしていたのですが
<%= f.collection_select(:automaker_id, Automaker.all, :id, :name, {}, class:"form-control") %>
{}が必要でした
{}にはselectedで選択済みにできるなどのオプションが入ります。
上記の{}は空欄の意味で記述されていると思っていましたが、実は違ったみたいですね。
下記のように修正したみたところ
<%= f.collection_select(:model_of_car_eq, @review_model_of_car, :model_of_car, :model_of_car, {include_blank: '指定なし'}, class:"form-control") %>
無事CSSを適用することができました!!
流石にフォームが大きすぎるのであとは微調整していきたいと思います!