2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

collection_select要素のclass指定方法

Posted at

こんにちわ!
現在車のレビューサイトをオリジナルアプリとして開発しており、
そこのレビュー検索機能ですこし悩んでしまった箇所がありましたのでアウトプットも兼ねて記事を書きたいと思います。

開発環境

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ページに検索フォームを実装していました。
それで出来上がったのが下記です。

スクリーンショット 2020-12-10 17.18.05.png

検索ボックスちっさ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") %>

スクリーンショット 2020-12-10 18.10.45.png

無事CSSを適用することができました!!

流石にフォームが大きすぎるのであとは微調整していきたいと思います!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?