ruby on rails 3 - Hide label in certain resolution with simple_form -


i have wrapper in simple_forms

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' |b|   b.use :html5   b.optional :readonly   b.use :label, class: 'hidden-sm hidden-xs col-md-3 control-label'    b.wrapper tag: 'div', class: 'col-md-9 checkbox-margin' |wr|     wr.wrapper tag: 'div', class: 'styled checkbox' |ba|       ba.use :label_span_input, class: 'col-md-9', span_class: 'left'     end      wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }     wr.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }   end end 

this hide control-label @ lower resolutions, great, see screenshot:

lower resolution

but need find way hide label of checkbox @ larger resolutions, otherwise it's rendered twice, see screenshot:

higher resolution

edit: html generated simple_form

<label class="boolean optional checkbox" for="timesheet_report_uninvoiced">   <input class="boolean optional col-md-9" id="timesheet_report_uninvoiced" name="timesheet_report[uninvoiced]" type="checkbox" value="1">   <span class="left">    </span>uninvoiced </label> 

i able accomplish this:

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' |b|   b.use :html5   b.optional :readonly   b.use :label, class: 'hidden-sm hidden-xs col-md-3 control-label'    b.wrapper tag: 'div', class: 'col-md-9 checkbox-margin hide-text-medium-large' |wr|     wr.wrapper tag: 'div', class: 'styled checkbox' |ba|       ba.use :label_span_input, class: 'col-md-9', span_class: 'left'     end      wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }     wr.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }   end end 

and added css:

@media (min-width: 992px)   .hide-text-medium-large     color: transparent     -webkit-touch-callout: none     -webkit-user-select: none     -khtml-user-select: none     -moz-user-select: none     -ms-user-select: none     user-select: none 

this make text transparent, checkbox stays is, , users can't see or select hidden text. resolution lower 992 it's being displayed. works perfectly!


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -