Allinea le caselle di controllo per f.collection_check_boxes con Simple_Form

Question

Sto usando RoR e sto usando la gemma Simple_Form per i miei moduli. Ho una relazione di oggetti in cui un utente può avere più ruoli e, durante la creazione, l'amministratore può selezionare i ruoli da applicare al nuovo utente. Vorrei che i ruoli avessero la loro casella di controllo sulla sinistra e il loro nome sulla destra in una disposizione orizzontale.

// Admin "box" //

invece degli attuali

//

"scatola"

Admin

//

Il mio codice corrente da mostrare i ruoli è questo.

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

La parte che sto ottenendo più appeso su è il fatto che le f.collection_check_boxes genera codice come questo.

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

che rende difficile per me per ottenere una classe CSS in là, come ci sono 3 componenti che devono essere toccati. Ho provato ad aggiungere cose come le classi dummy all'hash html, ma la classe dummy non compare nemmeno nell'html renderizzato.

Qualsiasi aiuto è molto apprezzato

EDIT: Soluzione

Grazie a Baldrick, il mio erb di lavoro simile a questa.

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

E il mio CSS è la seguente

.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

Secondo il doc of collection_check_boxes, c'è un'opzione item_wrapper_class per dare una classe CSS a campata che contiene la casella di controllo. Usalo come quella

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

E un CSS stile per mantenere la casella di controllo e l'etichetta sulla stessa linea:

.checkbox_container input { 
    display: inline; 
} 

Answer 2

Con Bootstrap è possibile:

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

Answer 3

Nell'ultimo 2.1 .0 ramo di SimpleForm con 2.3.1.0 di bootstrap-saas, installato con l'opzione bootstrap, il metodo collection_check_boxes ha dato come risultato alcune espansioni alle quali applicare la classe wrapper item inline non ha avuto alcun effetto positivo.

Sono riuscito a far sì che il modulo si allinei perfettamente utilizzando lo standard input, collection,: as =>: check_boxes methodology. Poi lo stile in linea ha funzionato perfettamente:

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

miei ruoli capita di essere un semplice array di array con valore, etichetta. Spero che questo ti aiuti.

Answer 4

Questa era la prima pagina SO per una ricerca DDG con 'rails collection_check_boxes bootstrap', ma non si tratta di Bootstrap, ma ecco comunque una soluzione per Bootstrap 4.

Questo funziona con normali Rails e Bootstrap 4, nessuna gemma richiesta. collection_check_boxes è un semplice metodo 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 

o

.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 

Sembrano identiche.

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