Adding Bootstrap attributes to Rails Simple Form input -
the following form snippet boolean styled checkbox:
= form.input :recur, label: "recurring"
i need 2 things:
1) style bootstrap button rather checkbox
2) add data-target , data-toggle attributes
this html code need add form button styling , collapse functionality , i'm having hard time figuring out right syntax simple form (i'm using slim):
<button class="btn btn-default" data-toggle="collapse" data-target="#recurringgift" type="button"> </button>
any advice appreciated!
1) simple form, can pass in options input, label, , wrapper. style label use button classes, , set display: none
on input itself, since clicking label select checkbox.
eg.
= f.input_field :some_checkbox, input_html: { style: "display: none"}, label_html: { class: "btn btn-primary"}
even better, can put checkbox before label, can use :checked
pseudoclass affect label's style:
= f.input_field :some_checkbox, input_html: { style: "display: none"} = f.label :some_checkbox, class: "btn btn-primary"
then in css can declare: input:checked + label { background-color: grey; }
eg. http://codepen.io/anon/pen/doqzyp
2) can pass data attributes data: {}
hash, eg.
= f.input_field :some_checkbox, input_html: { style: "display: none"}, data: {target: "#recurringgift", toggle: "collapse"}
be advised convention requires data-attributes use hyphens separate words (eg. data-some-attribute=""
), rails want underscores (eg. data: {some_attribute: ""}
Comments
Post a Comment