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:
but need find way hide label of checkbox @ larger resolutions, otherwise it's rendered twice, see screenshot:
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
Post a Comment