wake-up-neo.com

simple_form_for Rails-Optionsfeld inline

Ich versuche, dass meine Schaltflächen inline angezeigt werden und einen Standardwert haben, da er nicht leer sein kann. Ich benutze plataformatex/simple_form und bootstrap.

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true

Es wird dies gerendert:

<span>
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>    
</span>
<span>
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

Es ist klar, dass der style: nicht richtig funktioniert, aber ich bin mir nicht sicher, was funktionieren wird.

Ich folgte einem weiteren Vorschlag 

.radio_buttons { display:inline; }

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true

Und bekam:

<span class="radio_buttons">
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span class="radio_buttons">
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

Nur ein weiterer Hinweis, dass der Standardwert immer noch nicht funktioniert.

22
trev9065

Wenn Sie sie inline wünschen, müssen Sie den Labels die Inline-Klasse zuweisen, indem Sie Folgendes tun: :item_wrapper_class => 'inline'

Hier ist ein Beispiel mit Ihrem Code:

= f.input :is_private, 
          :collection => [[true, 'Private'], [false, 'Public']], 
          :label_method => :last, 
          :value_method => :first,
          :as => :radio_buttons, 
          :item_wrapper_class => 'inline',
          :checked => true

EDIT: Ich habe gerade festgestellt, dass meine Antwort spezifischer für simple_form + bootstrap war, da in bootstrap bereits Stile definiert wurden, wenn die Inline-Klasse des Labels angegeben wurde. Sie sollten jedoch in der Lage sein, mein Beispiel zu verwenden. Es wird nur noch ein bisschen mehr Arbeit an der Erstellung Ihrer benutzerdefinierten CSS erforderlich sein.

53
flynfish

Du kannst es versuchen 

f.collection_radio_buttons :options, [[true, 'Yes'] ,[false, 'No']], :first, :last ,:style =>"display:inline", :default => true

Nicht sicher, welchen Edelstein Sie für ein einfaches Formular verwenden, aber dies ist die Quelle oder eine Referenz, auf der Sie versuchen können

collection_radio_buttons(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)
2
Arpit Vaishnav

Mit Simple Form mit Bootstrap 3 können Sie die radio-Klasse zusammen mit den Optionen item_wrapper_class und item_wrapper_tag verwenden.

= f.collection_radio_buttons :sort, [[foo,bar],[foo,bar],
  :first, :last,
  item_wrapper_class: :radio,
  item_wrapper_tag: :div
2
Josh

Die obige Antwort hat möglicherweise nicht funktioniert, da ich Bootstrap nicht verwende. Es gibt aber auch andere Möglichkeiten. Ich habe ein div mit class = "Radio-Buttons" um die Buttons und das Label manuell geschlagen. Dann fügte ich dies meinem Stylesheet (SASS) hinzu:

.radio-buttons {
  margin: .5em 0;
  span input {
    float: left;
    margin-right: .25em;
    margin-top: -.25em;
  }
  #this grabs the MAIN label only for my radio buttons 
  #since the data type for the table column is string--yours may be different
  label.string { 
    margin-bottom: .5em !important;
  }

  clear: both;
}

.form-block {
  clear: both;
  margin-top: .5em;
}

 .radio-buttons span {
  clear: both;
  display:block;
 }

Dadurch werden die Optionsschaltflächen in ALLEN Frameworks eingebettet, obwohl dies für die Zurb Foundation am besten geeignet ist. ;)

1
Jenny Lang

Eine einfache Lösung:

Füge eine Klasse zum Element-Wrapper hinzu . Diese Klasse kann beliebig sein. Ich verwende im folgenden Beispiel 'Inline':

form.input :my_field, as: 'radio_buttons' wrapper_html: {class: 'inline'}

Definieren Sie dann einige CSS , die nur für Optionsfeldgruppen gelten (und nur für die eigentlichen Optionsfelder, nicht für die Elementbezeichnung):

input.radio_buttons.inline label.radio{
  display: inline-block;
}

Hier ist ein Beispiel, was dies ergibt:

The above yields this result

0
Ben

Nur für jemanden, der zurb-Stiftung mit einem einfachen Formular-Kontrollkästchen kam:

schlanke Sicht:

= f.input :company_stages, as: :check_boxes, required: true

scss:

// simple-form checbox
.checkbox {
    margin-right: 20px;
    display: inline-block;
}
0
yanyingwang