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. Я ударил div с помощью класса = «radio-buttons» вокруг кнопок и ярлыков. Затем я добавил это в моем стиле лист (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. ;)