Simple_Form, bottoni di radio e caselle di controllo
-
10-10-2019 - |
Domanda
C'è la possibilità di avvolgere le caselle di controllo e i pulsanti di radio in un elenco non ordinato?
Quando no, come posso visualizzarli verticalmente?
So che si tratta di layout, ma comunque una domanda di programmazione.
Soluzione
Come un rapido hack per andare avanti con la vita, aggiungendolo alla parte inferiore dell'helper Application funziona per avvolgere semplice ogni etichetta/coppia di input in 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
Altri suggerimenti
È un modo più pulito e migliore per ridefinire gli input come seguire:
Crea una nuova directory "app/input",
Crea file 'collection_radio_buttons_input.rb' in esso, incolla seguente
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
Accendi l'opzione 'config.inputs_discovery' in config/inizializer/simple_form.rb
Ecco!
Ora, questo controllo verrà utilizzato al posto del controllo RADIOBUTTONS SEMPLE_FORM predefinito e sei libero di utilizzare qualsiasi formattazione.
L'ho appena fatto con CSS. Ho schiaffeggiato un div con class = "radio-button" attorno ai pulsanti ed etichetta. Poi l'ho aggiunto al mio foglio di stile (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;
}
Ciò renderà in linea i pulsanti di radio su tutti i framework, anche se questo è ottimizzato per apparire al meglio per Zurb Foundation. ;)