Выровнять флажки для f.collection_check_boxes с помощью Simple_Form

Я использую RoR, и я использую жемчужину Simple_Form для своих форм. У меня есть объектное отношение, при котором пользователь может иметь несколько ролей, а во время создания администратор может выбрать, какие роли применить к новому пользователю. Я бы хотел, чтобы у Ролей был свой флажок слева, а их имя справа в горизонтальной компоновке.

// "box" Admin //

вместо текущего

"окно"

Администратор

Мой текущий код для отображения ролей - это.

  <div class="control-group">
    <%= f.label 'Roles' %>
    <div class="controls">
      <%= f.collection_check_boxes 
                 :role_ids, Role.all, :id, :name %>
    </div>
  </div>

Часть, на которую я больше всего зацикливаюсь, - это тот факт, что f.collection_check_boxes генерирует такой код.

<span>
  <input blah blah />
  <label class="collection_check_boxes" blah>blah</label>
</span>

Мне тяжело получить класс css, так как есть 3 компонента, которые нужно трогать. Я попытался добавить такие вещи, как фиктивные классы, в хеш: html, но класс фикчирования даже не отображается в отображаемом html.

Любая помощь приветствуется

EDIT: решение

Благодаря Baldrick мой рабочий erb выглядит так.

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name,
      {:item_wrapper_class => 'checkbox_container'} %>

И мой CSS выглядит следующим образом

.checkbox_container {
  display: inline-block;
  vertical-align: -1px;
  margin: 5px;
 }
.checkbox_container input {
  display: inline;
 }
.checkbox_container .collection_check_boxes{
  display: inline;
  vertical-align: -5px;
 }

Ответы

Ответ 1

В соответствии с doc из collection_check_boxes есть опция item_wrapper_class, чтобы дать класс css для диапазона, содержащего этот флажок. Используйте его так

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'checkbox_container' %>

И стиль CSS, чтобы сохранить флажок и метку в одной строке:

.checkbox_container input {
  display: inline;
}

Ответ 2

С помощью Bootstrap вы можете:

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'inline' %>

Ответ 3

В последней ветке 2.1.0 SimpleForm с 2.3.1.0 bootstrap-saas, установленной с параметром bootstrap, метод collection_check_boxes привел к некоторым промежуткам, к которым применение класса оболочки inline не имело хорошего эффекта.

Мне удалось получить форму, чтобы она идеально соответствовала стандартной методологии ввода, коллекции, as = > : check_boxes. Затем встроенный стиль работал отлично:

<%= f.input :roles, :collection => valid_roles, :label_method => :last, :value_method => :first, :as => :check_boxes, :item_wrapper_class => 'inline'  %>

Мои роли - простой массив массивов со значением, меткой. Надеюсь, это поможет.

Ответ 4

Это была первая страница SO для поиска DDG с "rails collection_check_boxes bootstrap", но это не о Bootstrap, но в любом случае это решение для Bootstrap 4.

Это работает с обычными Rails и Bootstrap 4, никакой жемчужины не требуется. collection_check_boxes - простой метод Rails.

  .form-group
    =f.label :industry_interest
    %br
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb|
      =cb.check_box 
      =cb.label
      %br

или

  .form-group
    =f.label :industry_interest
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb|
      .form-check
        =cb.label class: 'form-check-label' do
          =cb.check_box class: 'form-check-input'
          =cb.text

Они выглядят одинаково.

https://v4-alpha.getbootstrap.com/components/forms/#checkboxes-and-radios