Rails, Chosen, Bootstrap: как применить Bootstrap Styling к полю множественного выбора - PullRequest
Новая
       9

Rails, Chosen, Bootstrap: как применить Bootstrap Styling к полю множественного выбора

0 голосов
/ 26 сентября 2018

Rails: 5.2.1

Ruby: 2.5.1p57

Bootstrap: 4.1.3

Я пытаюсь добавить Bootstrap Styling в поле множественного выбора.

Вот моя форма: 

<%= simple_form_for person do |f| %>
  <%= f.input :firstname %>
  <%= f.input :lastname %>
  <%= f.input :email %>
  <%= f.input :phone %>
  <%= f.input :tag_list, as: :select, collection: TagList.all, label_method: :name, value_method: :name, input_html: {class: 'chosen-select', multiple: true} %>
  <br>
  <%= f.button :submit %>
<% end %>

Поле множественного выбора - это поле с ":tag_list".Вот как это выглядит:

enter image description here

Если вы сравните поле «Телефон» с полем «Список тегов», вы увидитечто поле «Телефон» имеет стиль Bootstrap, а поле «Список тегов» - нет.

Как добавить стиль Bootstrap в поле «Несколько вариантов выбора»?

«Выбор нескольких элементов»поле задано "chosen-rails" - гем.Вот как я это реализовал:

Gemfile: 

gem 'chosen-rails'

application.js: 

//= require chosen-jquery
//= require scaffold

application.scss: 

@import "chosen";

scaffold.js.coffee:

$ ->
  # enable chosen js
  $('.chosen-select').chosen
    allow_single_deselect: true
    no_results_text: 'No results matched'
    width: '100%'

Редактировать:

Благодаря комментатору представляется возможным перезаписать классы поля множественного выбора.Следующий код делает поле выбора более похожим на начальную загрузку:

custom.scss: 

.chosen-choices {
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #ced4da !important;
}

1 Ответ

0 голосов
/ 29 сентября 2018

Благодаря Марку Дэвису я нашел какое-то решение.

В выбранной библиотеке используются классы "selected-choices" и "search-choices".Можно перезаписать эти классы с помощью атрибута "Important1008 * custom.scss: 

.chosen-choices {
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #ced4da !important;
}
...