Ich verwende RoR und ich verwende den Edelstein Simple_Form für meine Formulare. Ich habe eine Objektbeziehung, in der ein Benutzer mehrere Rollen haben kann. Während der Erstellung kann der Administrator auswählen, welche Rollen auf den neuen Benutzer angewendet werden sollen. Ich möchte, dass die Rollen ihr Kontrollkästchen links und ihren Namen rechts in horizontaler Anordnung haben.

// "Box" Admin //

anstelle des Stroms

//

"Box"

Administrator

//

Mein aktueller Code zum Anzeigen der Rollen ist dieser.

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

Der Teil, an dem ich am meisten hängen bleibe, ist die Tatsache, dass die f.collection_check_boxes Code wie diesen generieren.

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

Das macht es schwierig für mich, eine CSS-Klasse zu bekommen, da es 3 Komponenten gibt, die berührt werden müssen. Ich habe versucht, dem: html-Hash Dinge wie Dummy-Klassen hinzuzufügen, aber die Dummy-Klasse wird im gerenderten HTML-Code nicht einmal angezeigt.

Jede Hilfe wird sehr geschätzt

EDIT: Lösung

Dank Baldrick sieht mein Arbeitsbereich so aus.

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

Und mein CSS ist wie folgt

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