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基金會。 ;）