Aligner les cases à cocher pour f.collection_check_boxes avec Simple_Form

Je suis à l'aide de RoR et je suis en utilisant le Simple_Form bijou pour mes formulaires. J'ai une relation d'objet par lequel un Utilisateur peut avoir plusieurs Rôles, et lors de la création, l'administrateur peut sélectionner les Rôles à appliquer pour le nouvel Utilisateur. Je voudrais que les Rôles d'avoir une case à cocher sur la gauche, et leur nom sur le droit à une disposition horizontale.

//
"boîte" Admin
//

au lieu de l'actuelle

"box"

Admin

Mon code actuel, de montrer le rôle est de cette.

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

La partie dont je suis le plus à obtenir accroché sur le fait que la fonction f.collection_check_boxes génère un code de ce genre.

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

Qui rend difficile pour moi d'obtenir une classe css là aussi il y a 3 composants qui doivent être touchés. J'ai essayé d'ajouter des choses comme mannequin classes à l' :html de hachage, mais le mannequin de classe ne s'affiche même pas dans le rendu html.

Toute aide est grandement appréciée

EDIT: Solution

Grâce à Baldrick, mon travail erb 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;
 }

source d'informationauteur Black Dynamite

9

Selon la doc de collection_check_boxesil y a une option item_wrapper_class de donner une classe css à l'intervalle contenant la case à cocher. L'utiliser 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 et l'étiquette sur la même ligne:
```
.checkbox_container input {
  display: inline;
}
```

Avec Bootstrap, vous pouvez:

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

3

Dans la dernière version 2.1.0 branche de SimpleForm avec 2.3.1.0 de bootstrap saas, installé avec bootstrap option, le collection_check_boxes méthode a entraîné certains s'étend à qui l'application de la ligne de l'élément de classe wrapper n'avait aucun bon effet.

J'ai été en mesure d'obtenir le formulaire pour être parfaitement alignés à l'aide de l'entrée standard, la collecte, l': => :check_boxes méthodologie. 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 arrive d'être un simple tableau de tableaux de la valeur, de l'étiquette. Espérons que cette aide.

C'était la première DONC à la page de la DDG recherche avec "rails collection_check_boxes bootstrap", mais il n'est pas question de Bootstrap, mais voici une solution pour Bootstrap 4 de toute façon.

Cela fonctionne avec la plaine Rails et Bootstrap 4, pas de gem nécessaire. collection_check_boxes est une plaine Rails de méthode.

  .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

Ils ont l'air identiques.

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

Vous devez vous connecter pour publier un commentaire.