Aligner les cases à cocher pour f.collection_check_boxes avec Simple_Form

Question

J'utilise RoR et j'utilise la gemme Simple_Form pour mes formulaires. J'ai une relation d'objet par laquelle un utilisateur peut avoir plusieurs rôles, et pendant la création, l'administrateur peut sélectionner les rôles à appliquer au nouvel utilisateur. Je voudrais que les Rôles aient leur case à cocher sur la gauche, et leur nom sur la droite dans un arrangement horizontal.

// "box" Admin //

au lieu du courant

//

"box"

Administrateur

//

Mon code actuel à afficher les rôles sont ceci.

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

La partie que je suis le plus enferrons est sur le fait que les f.collection_check_boxes génère du code comme celui-ci.

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

ce qui rend difficile pour moi d'obtenir une classe css là-dedans comme il y a 3 éléments qui doivent être touchés. J'ai essayé d'ajouter des choses telles que des classes factices au hash: html, mais la classe dummy n'apparaît même pas dans le html rendu.

Toute aide est grandement appréciée

EDIT: Solution

Merci à Baldrick, mon erb de travail ressemble à ceci.

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

Et mon CSS est comme suit

.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; 
} 

Answer 1

Selon le doc of collection_check_boxes, il y a une option item_wrapper_class pour donner une classe à la durée css contenant la case à cocher. Utilisez comme ça

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

Et un style CSS pour garder la case à cocher et l'étiquette sur la même ligne:

.checkbox_container input { 
    display: inline; 
} 

Answer 2

Avec Bootstrap, vous pouvez:

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

Answer 3

Dans le dernier 2.1 .0 branche de SimpleForm avec 2.3.1.0 de bootstrap-saas, installé avec l'option bootstrap, la méthode collection_check_boxes a entraîné certaines travées auxquelles l'application de la classe wrapper de l'élément inline n'a pas eu d'effet.

J'ai été en mesure d'aligner parfaitement le formulaire en utilisant la méthode d'entrée, de collecte standard: as =>: check_boxes. Ensuite, le style en ligne a parfaitement fonctionné:

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

Mes rôles se trouvent un simple tableau de tableaux avec valeur, étiquette. J'espère que cela t'aides.

Answer 4

C'était la première page SO pour une recherche DDG avec 'rails collection_check_boxes bootstrap', mais il ne s'agit pas de Bootstrap, mais voici une solution pour Bootstrap 4 de toute façon.

Cela fonctionne avec Rails simples et Bootstrap 4, aucune gemme requise. collection_check_boxes est une méthode Rails simple.

.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 

ou

.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 

Ils semblent identiques.

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