Have horizontal radio_buttons when using Bootstrap

[Juliano Nunes]

I'm using the Bootstrap-sass gem along with simple_form and I need to create an horizontal form. Everything is working as expected but the radio buttons. The radio button items are positioned vertically instead of horizontal. How can I place each radio button item in the same line?

Here is my code:

<%= simple_form_for(@patient, html: { class: 'form-horizontal' }, wrapper: :horizontal_form, wrapper_mappings: {
    check_boxes: :horizontal_radio_and_checkboxes,
    radio_buttons: :horizontal_radio_and_checkboxes,
    file: :horizontal_file_input,
    boolean: :horizontal_boolean
  }) do |f| %>
  <%= f.error_notification %>

  <%= f.input :name %>
  <%= f.input :gender, collection: [['Masculino', 'M'],['Feminino', 'F']], as: :radio_buttons %>
 
   
    <%= f.input :card_number %>
    <%= f.input :card_expiration, as: :date, html5: true %>
   
    <%= f.input :date_birth, as: :date, html5: true %>
    <%= f.input :marital_status %>
    <%= f.input :cep %>
    <%= f.input :address %>
    <%= f.input :number %>
    <%= f.input :complement %>
    <%= f.input :neighborhood %>
    <%= f.input :city %>
    <%= f.input :state_id %>

 

 
    <%= f.button :submit %>
 
<% end %>

[Cédric Lor]

Hello

It would be helpfull if you posted the html resulting from your helpers (just the part corresponding to the radio buttons and any relevant wrappers).

However, I think you should try using:

item_wrapper_class: "inline-block"

to your :gender input.

I also believe there is a item_wrapper_tag option that you could turn to span.

Regards,

Cedric

[Juliano Nunes]

Hi, here is the resulting html:

<div class="form-group radio_buttons optional patient_gender"><label class="radio_buttons optional col-sm-3 control-label">Gender</label><div class="col-sm-9"><span class="radio inline-block"><label for="patient_gender_m"><input class="radio_buttons optional" value="M" name="patient[gender]" id="patient_gender_m" type="radio">Masculino</label></span><span class="radio inline-block"><label for="patient_gender_f"><input class="radio_buttons optional" value="F" name="patient[gender]" id="patient_gender_f" type="radio">Feminino</label></span></div></div>

[Cédric Lor]

Hi,

It seems to have been working (wrapping the items into a span and giving them a css class). How does it display? Did it solve your isssue?

Of course, item-wrapper-class: "inline-block" will not do anything of its own on the styles, unless you defined it in your stylesheet (display: inline-block).

Regards

[Juliano Nunes]

Here's how it is rendered:

[Juliano Nunes]

[Cedric Lor]

Well,

Juliano, it’s not easy to help you: you should provide more information.

From the HTML you provided a couple of weeks ago, there is no reason why these radio button should not be in line.

You have inputs which are wrapped into labels which are wrapped into spans. All of these are inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente

Unless otherwise specified in the CSS, inline element do not show on different lines, unless they reach the end of the line.

Maybe the display property of one of these items has been set to display: block somewhere in the CSS.

It might be easier to help you if you provide:

1. the code you use for the rails helper;

2. the resulting html (you’ve already done it);

3. the resulting css.

Also, how did you configure this line in the simple_form.rb initializer

  # Define the way to render check boxes / radio buttons with labels.

  # Defaults to :nested for bootstrap config.

  #   inline: input + label

  #   nested: label > input

  config.boolean_style = :nested

<%= a.input :user_rating,

    as: :radio_buttons,

    boolean_style: :inline,

    collection: (user_rating_option_array),

    label: t( :long_question, scope: [:tests_questions, :"question_#{a.index + 1}"], default: "#{@tests.fetch(a.index).test_long_question}"),

    label_html: {

      class: "block"

      },

    wrapper_html: {

      class: "text-center my-rating-wrapper"

    },

    item_wrapper_class: "inline-block",

    input_html: {

      class: "rating-input"

    },

    checked: params[:action] == 'show' && params[:controller] == 'firms' ? 3 : nil

  %>

Did you properly define your inline-block class in the CSS?

From what I see on the screenshot you provided, it seems that you might also have an issue with the main label

<label class="radio_buttons optional col-sm-3 control-label">Gender</label>

You should display it as display: block, by setting the class on the label_html property of the helper.

Good luck.

Le 26 Jul 2015 à 15:35, Juliano Nunes <julia...@gmail.com> a écrit :