Simple_form, boutons radio et case à cocher
-
10-10-2019 - |
Question
Y a-t-il la possibilité d'envelopper les cases à cocher et les boutons radio dans une liste non ordonnée?
Quand pas, comment puis-je les afficher verticalement?
Je sais que c'est lié à la mise en page, mais toujours une question de programmation.
La solution
En tant que hack rapide pour passer à la vie, l'ajout au bas de l'application Helper fonctionne pour envelopper simple chaque étiquette / paire d'entrée dans 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
Autres conseils
C'est une façon plus propre et meilleure de redéfinir les entrées comme suivre:
Créer un nouveau répertoire «App / Entrée»,
Créer un fichier 'collection_radio_buttons_input.rb' dans elle, collez suivant
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
Allumez l'option 'config.inputs_discovery' dans config / initialisers / Simple_form.rb
Le tour est joué!
Maintenant, ce contrôle sera utilisé à la place du contrôle des radiobuttons simple_form par défaut, et vous êtes libre d'utiliser n'importe lequel du formatage.
Je viens de le faire avec CSS. J'ai giflé un div avec class = "radio-button" autour des boutons et étiqueter. Ensuite, j'ai ajouté cela à ma feuille de style (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;
}
Cela rendra les boutons radio en ligne sur tous les frameworks, bien que cela soit modifié pour être le meilleur pour la fondation de zurb. ;)