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

Popular posts from this blog

python - Healpy: From Data to Healpix map -

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -