1

是否有可能将复选框和单选按钮包装在无序列表中？

如果没有，我如何垂直显示它们？

我知道这是与布局相关的，但仍然是一个编程问题。

4

3 回答 3

2

作为继续生活的快速技巧，将其添加到应用程序助手的底部可以简单地将每个标签/输入对包装在一个 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
于 2010-10-27T17:35:35.247 回答
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/initializers/simple_form.rb 中打开选项 'config.inputs_discovery'

瞧！

现在，将使用此控件代替默认的 RadioButtons simple_form 控件，并且您可以自由使用任何格式。

于 2012-11-25T13:18:11.537 回答
0

我只是用 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。;)

于 2013-09-28T08:34:04.417 回答