Simple_Form: Remove Outer Label for an Inline Checkbox with Label

Simple_form: Remove outer label for an inline checkbox with label

You can use:

= f.input :remember_me, as: :boolean, inline_label: 'Remember me', label: false

Remove outer label from collection_check_boxes

I finally figured it out by myself almost one year later. There is an option called boolean_style: :inline that makes it work.

%table
  = f.collection_check_boxes :task_ids, @coll, :id, :label, boolean_style: :inline do |r|
    %tr
      %td= r.label
      %td= r.check_box
      %td= r.object.due_date

I found the solution and explanation here https://github.com/plataformatec/simple_form/issues/1266:

Since you want it to be inline (because you're making it nested by
yourself) you need to use boolean_style: :inline config.

Using simple_form how do I get this class on these inner labels vs the outer label ones?

Just copying @flynfish answer from how to change class of a label for checkboxes in simple_form to this thread. Seems to be the one according to @marcamillion comment here.

You can give the label a class with this option :item_wrapper_class =>
'class_goes_here'

Here is a full example:

= user.input :resident, 
         :collection => [["In the U.S", true],["Outside the U.S.", false]], 
         :label_method => :first, 
         :value_method => :last,
         :as => :radio_buttons, 
         :label => "Where is your principle residence?",
         :item_wrapper_class => 'inline'

Hide label in certain resolution with simple_form

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!

How to generate a radio-inline label with simple_form and bootstrap?

By getting inspiration form this answer I managed to do it by creating a :radio_buttons_inline input type.

Create the file:

app/inputs/radio_buttons_inline_input.rb

with this content:

class RadioButtonsInlineInput < SimpleForm::Inputs::CollectionRadioButtonsInput
  def input
    label_method, value_method = detect_collection_methods
    @builder.send("collection_radio_buttons", attribute_name, collection, value_method,
      label_method, input_options, input_html_options, 
      &collection_block_for_nested_boolean_style)
  end

  protected
    def item_wrapper_class
      "radio-inline"
    end
end

And then use it in your view like so:

<%= simple_form_for @visitor do |f| %>
    <%= f.error_notification %>
     <%= f.input :favourite, :as => :radio_buttons_inline%>
<% end %>

This renders the html as:

<div class="control-group radio_buttons_inline required visitor_favourite">
    <div class="controls">
        <label class="radio-inline">
            <input class="radio_buttons_inline required" id="visitor_favourite_true" name="visitor[favourite]" type="radio" value="true" />
               Yes
        </label>
        <label class="radio-inline">
            <input class="radio_buttons_inline required" id="visitor_favourite_false" name="visitor[favourite]" type="radio" value="false" />
            No
        </label>
    </div>
 </div>

---

Related Topics