simple_form、ラジオボタン、チェックボックス

Question

チェックボックスとラジオボタンを並べ替えられていないリストにまとめる可能性はありますか？

そうでない場合、どのようにしてそれらを垂直に表示できますか？

これはレイアウトに関連していることは知っていますが、それでもプログラミングの質問です。

Answer 1

人生を進めるための迅速なハックとして、これをアプリケーションヘルパーの底に追加すると、Divで各ラベル/入力ペアを単純にラップするようになります。

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

次のような入力を再定義するためのよりクリーンでより良い方法です：

新しいディレクトリ「アプリ/入力」を作成し、

ファイル 'collection_radio_buttons_input.rb'を作成します。

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

config.inputs_discovery 'のconfig.inputs_discovery'/simple_form.rbのオプションをオンにします

出来上がり！

これで、このコントロールは、デフォルトのRadioButtons Simple_Formコントロールの代わりに使用され、フォーマットのいずれかを自由に使用できます。

Answer 3

CSSでやっただけです。ボタンとラベルの周りにclass = "Radio-Buttons"でDivを平手打ちしました。次に、これをスタイルシート（SASS）に追加しました。

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

これにより、すべてのフレームワークにラジオボタンがインラインになりますが、これはZurb Foundationにとって最適に見えるように微調整されます。 ;）