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' 在配置/初始化/ 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基金会。 ;）