Simple_form, envolver botones de radio y casillas de verificación
-
10-10-2019 - |
Pregunta
¿Existe la posibilidad de envolver las casillas de verificación y los botones de radio en una lista desordenada?
Cuando no, ¿cómo puedo mostrarlos verticalmente?
Sé que esto está relacionado con el diseño, pero sigue siendo una pregunta de programación.
Solución
Como un truco rápido para seguir adelante con Life, agregar esto al fondo de la aplicación Helper funciona para envolver simple cada etiqueta/par de entradas en un 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
Otros consejos
Es más limpio y mejor forma de redefinir entradas como seguir:
Cree un nuevo directorio 'Aplicación/Entradas',
Crear archivo 'Collection_radio_buttons_input.rb' en él, pegar siguiendo
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
Activar la opción 'config.inputs_discovery' en config/inicializadores/simples_form.rb
¡Voila!
Ahora, este control se utilizará en lugar del control RadioButtons Simple_Form predeterminado, y es libre de usar cualquier formato.
Lo acabo de hacer con CSS. Golpeé un DIV con class = "Radio-Buttons" alrededor de los botones y la etiqueta. Luego agregué esto a mi hoja de estilo (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;
}
Esto hará que los botones de radio estén en línea en todos los marcos, aunque esto se ajusta para verse mejor para Zurb Foundation. ;)