Simple_form, Wrap -Optionsfelder und Kontrollkästchen

Question

Gibt es die Möglichkeit, Kontrollkästchen und Optionsfelder in einer ungeordneten Liste zusammenzuwickeln?

Wenn nicht, wie kann ich sie vertikal anzeigen?

Ich weiß, dass dies Layoutbezogen ist, aber immer noch eine Programmierfrage.

Answer 1

Als kurzer Hack, um mit dem Leben weiterzumachen, wird das Hinzufügen zum Ende des Anwendungshelfers dazu beitragen, jedes Etikett/Eingangspaar in einem DIV zu wickeln:

module SimpleForm::ActionViewExtensions::Builder

  def collection_radio(attribute, collection, value_method, text_method, options={}, html_options={})
    collection.map do |item|
      value = item.send value_method
      text  = item.send text_method

      default_html_options = default_html_options_for_collection(item, value, options, html_options)

      @template.content_tag(:div, radio_button(attribute, value, default_html_options) <<
        label("#{attribute}_#{value}", text, :class => "collection_radio"))
    end.join.html_safe
  end

  def collection_check_boxes(attribute, collection, value_method, text_method, options={}, html_options={})
    collection.map do |item|
      value = item.send value_method
      text  = item.send text_method

      default_html_options = default_html_options_for_collection(item, value, options, html_options)
      default_html_options[:multiple] = true

      @template.content_tag(:div, 
      check_box(attribute, default_html_options, value, '') <<
        label("#{attribute}_#{value}", text, :class => "collection_check_boxes"))
    end.join.html_safe
  end

end

Answer 2

Es ist sauberer und besserer Weg, Eingaben wie folgt neu zu definieren:

Erstellen Sie ein neues Verzeichnis 'App/Eingaben',

Erstellen Sie die Datei 'Collection_radio_buttons_input.rb' in It, Fügen Sie die folgende Einfügung ein

class CollectionRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput
  def item_wrapper_class
    "radiobox"
  end
  def build_nested_boolean_style_item_tag(collection_builder)
    collection_builder.radio_button + template.content_tag(:span,collection_builder.text)
  end
end

Aktivieren Sie die Option 'config.inputs_discovery' in config/initializer/simple_form.rb

Voila!

Jetzt wird diese Steuerung anstelle einer Standard -Radiobuttons Simple_form -Steuerung verwendet, und Sie können eine Formatierung verwenden.

Answer 3

Ich habe es gerade mit CSS gemacht. Ich habe ein Div mit Class = "Radio-Buttons" um die Tasten und die Etikett geschlagen. Dann habe ich dies zu meinem Stylesheet (SASS) hinzugefügt:

.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 wird die Optionsschaltflächen in allen Frameworks eingestellt, obwohl dies für die Zurb Foundation am besten aussieht. ;))