CODEWITHSUNDEEP
ruby-on-rails-3twitter-bootstrapsimple-form
rept
rept

Reputation: 2236

Hide label in certain resolution with simple_form

I have this wrapper in simple_forms

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' do |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' do |wr|
    wr.wrapper tag: 'div', class: 'styled checkbox' do |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 will hide the control-label at lower resolutions, which is great, see screenshot:

Lower resolution

But I need to find a way to hide the label of the checkbox at larger resolutions, otherwise it's rendered twice, see screenshot:

Higher resolution

Edit: This is the HTML generated by 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 only
</label>

Upvotes: 2

Views: 409

Answers (2)

rept
rept

Reputation: 2236

I was able to accomplish it like this:

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' do |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' do |wr|
    wr.wrapper tag: 'div', class: 'styled checkbox' do |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 this to the 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 will make only the text transparent, the checkbox stays as is, and users can't see or select the hidden text. As soon as the resolution is lower than 992 it's being displayed. Works perfectly!

Upvotes: 2

ckuijjer
ckuijjer

Reputation: 13814

Take a look at the responsive utility classes of Bootstrap. You might add for example add the hidden-md and hidden-lg classes to hide it on medium and large screens

Upvotes: 0

Related Questions