simple_form,自收音机按钮和复选框
-
10-10-2019 - |
题
是否有可能在无序列表中将复选框和无线电按钮一起处理?
什么时候没有,我如何垂直显示它们?
我知道这与布局有关,但仍然是一个编程问题。
解决方案
作为一个快速攻击生活的黑客,将其添加到应用程序助手的底部,可以简单地包装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
其他提示
创建新目录“应用/输入”,
在其中创建文件'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
瞧!
现在,将使用此控件代替默认的RadioButtons Simple_form控件,并且您可以自由使用任何格式。
我只是用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的最佳选择。 )
不隶属于 StackOverflow