Bambi's Dilemma Bambi's Dilemma - 5 months ago 46
CSS Question

Radio Buttons Displaying Incorrectly using Bootstrap in ruby on rails

Hi I'm a new programmer and I'm trying to make a somewhat complex form. Im using bootstrap 3 and ruby on rails 4. I have a form for making a unit(a kind of product) that have a color. You can pick this color from the model Color using nested attributes. I only want the user to be able to select the hue of the colour using radio buttons with values from 0-9 or n or s. I want all this radio buttons to be in the same line but I having some problems with the styling. I can only make them all vertical or all horizontal but all overlapping and with all the labels behind the radio_buttons. I have no idea how to fix this :( any info would be welcome.
Thanks in advance.
enter image description here

<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(@unit) do |f| %>

<%= f.label :quantity, "Cantidad:" %>
<%= f.number_field :quantity, class: 'form-control' %>
<hr>
...

<div class="radio-inline">
<%= f.fields_for :colors do |ff| %>
<%= ff.label :hue, "Nombre de tu Marca:" %>
<%= ff.radio_button :hue, '0' %> 0
<%= ff.radio_button :hue, '1' %> 1
<%= ff.radio_button :hue, '2' %> 2
<%= ff.radio_button :hue, '3' %> 3
<%= ff.radio_button :hue, '4' %> 4
<%= ff.radio_button :hue, '5' %> 5
<%= ff.radio_button :hue, '6' %> 6
<%= ff.radio_button :hue, '7' %> 7
<%= ff.radio_button :hue, '8' %> 8
<%= ff.radio_button :hue, '9' %> 9
<%= ff.radio_button :hue, 'n' %> n
<%= ff.radio_button :hue, 's' %> s
<% end %>
</div>
....
</div>
</div>


I also did this whit no results:

<%= f.fields_for :colors do |ff| %>
<%= ff.label :hue, "Hue:" %>
<div class='radio_inline'><%= ff.radio_button :hue, '0' %> 0</div>
<div class='radio_inline'><%= ff.radio_button :hue, '1' %> 1</div>
<div class='radio_inline'><%= ff.radio_button :hue, '2' %> 2</div>
<div class='radio_inline'><%= ff.radio_button :hue, '3' %> 3</div>
<div class='radio_inline'><%= ff.radio_button :hue, '4' %> 4</div>
<div class='radio_inline'><%= ff.radio_button :hue, '5' %> 5</div>
<div class='radio_inline'><%= ff.radio_button :hue, '6' %> 6</div>
<div class='radio_inline'><%= ff.radio_button :hue, '7' %> 7</div>
<div class='radio_inline'><%= ff.radio_button :hue, '8' %> 8</div>
<div class='radio_inline'><%= ff.radio_button :hue, '9' %> 9</div>
<div class='radio_inline'><%= ff.radio_button :hue, 'n' %> n</div>
<div class='radio_inline'><%= ff.radio_button :hue, 's' %> s</div>
<% end %>


enter image description here

Ren Ren
Answer

You could try wrapping each radio_button with a label tag with class of 'radio-inline', as shown in this bootstrap example, from the documentation:

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1"   value="option1"> 1
</label>

In your case, you shouldn't wrap the whole nested form in a radio-inline div. Instead wrap each radio button input in a radio-inline div, like so:

<%= f.fields_for :colors do |ff| %>
  <%= ff.label :hue, "Nombre de tu Marca:" %>
  <div class="radio-inline">
    <%= ff.radio_button :hue, '0' %> 0
  </div>
  <div class="radio-inline">
    <%= ff.radio_button :hue, '1' %> 1
  </div>
  <div class="radio-inline">
    <%= ff.radio_button :hue, '2' %> 2
  </div>
<% end %>