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

问题:

I'm using:

<%= simple_form_for @visitor, html: {class: 'form-inline'} do |f| %>     <%= f.error_notification %>     <%= f.input :favorite, label: false, as: :radio_buttons %>     <%= f.submit "Choose!", :class => "btn btn-primary"%> <% end %> 

And I get this html:

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

But what I'm looking for is a way to generate the labels as radio-inline because that is the style i want:

<label class="radio-inline">  

There is a similar question here but for the "radio inline" class and desn't work as to generate radio-inline.

I'm using simple_form 3.0.2 and tried 3.1.0rc2 and Bootstrap 3.2.0 with rails 4.1.4 Anyway or method to solve this?

回答1:

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> 

回答2:

I got the following to work under simple_form 3.1.0:

f.input :favorite, label: false, as: :radio_buttons,          item_label_class: "radio-inline", item_wrapper_tag: false 

回答3:

Here is for Bootstrap 4:

<div class="form-check form-check-inline">   <%= f.label :favorite, class: "form-check-label" do %>     <%= f.radio_button :favorite, true, false, class: "form-check-input" %> Yes   <% end %> </div> <div class="form-check form-check-inline">   <%= f.label :favorite, class: "form-check-label" do %>     <%= f.radio_button :favorite, false, false, class: "form-check-input" %> No   <% end %> </div> 

回答4:

Just pass in:

item_wrapper_class: 'inline' 

It'll look like:

 <%= f.input :favorite, label: false, as: :radio_buttons, item_wrapper_class: 'inline'  %> 

And it should work.

文章来源: How to generate a radio-inline label with simple_form and bootstrap?