collection_원소의class 지정 방법 선택
지금 차 리뷰 사이트를 오리지널 앱으로 개발하고 있어요.
그곳의 댓글 검색 기능이 좀 고민스러운 부분이 있기 때문에 출력을 겸해서 기사를 쓰고 싶습니다.
개발 환경
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 페이지에 검색 폼을 설치했습니다.
그리고 완성된 것은 아래의 것이다.
검색 상자에 왜 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_요소를 선택하는 매개 변수로 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가 잘 적용되었습니다!!
모양이 너무 커서 나중에 미세조정을 하고 싶어요!
Reference
이 문제에 관하여(collection_원소의class 지정 방법 선택), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Yoshimi_abe/items/20de2af0140c8a18882e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 페이지에 검색 폼을 설치했습니다.그리고 완성된 것은 아래의 것이다.
검색 상자에 왜 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_요소를 선택하는 매개 변수로 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가 잘 적용되었습니다!!
모양이 너무 커서 나중에 미세조정을 하고 싶어요!
Reference
이 문제에 관하여(collection_원소의class 지정 방법 선택), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Yoshimi_abe/items/20de2af0140c8a18882e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<%= f.collection_select(:automaker_id, Automaker.all, :id, :name, {}, class:"form-control") %>
<%= f.collection_select(:model_of_car_eq, @review_model_of_car, :model_of_car, :model_of_car, {include_blank: '指定なし'}, class:"form-control") %>
Reference
이 문제에 관하여(collection_원소의class 지정 방법 선택), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Yoshimi_abe/items/20de2af0140c8a18882e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)