CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
Neil
Neil

Reputation: 5178

Bootstrap radio buttons awkward in column context, not lining up with other columns in row

Here is a screen shot of as close as I could get with the radio buttons lining up with the other columns in a row:

Picture of radio buttons in context of form

The issue is that the Radio buttons are not lining up horizontally (not equal space top and bottom). It isn't terrible, but it just looks awkward. It would be nice if there was some way to make the radio buttons really seem like they are a part of the form. Maybe make them bigger, take up more space in their container, and ensure that the radio buttons/labels are aligned vertically.

Here is the relevant code in the form:

<div class="row">
    <div class="col-sm-4">
        <div class='form-group'>
            <%= f.label :web %> 
            <%= f.text_field :web, class: "form-control" %>
        </div>
    </div>
    <div class="col-sm-4">
        <div class='form-group'>
            <%= f.label :business_contact, "Business Contact" %>  
            <%= f.text_field :business_contact, class: "form-control" %>
        </div>
    </div>

    <div class="col-sm-4">
        <div class='text-center'>
            <br>
            <%= f.label :gender, "Gender: " %> 
            <%= f.radio_button :gender, 'Male', checked: (@employer.gender == 'Male' || @employer.gender == 'male'), class: "radio-inline" %>
            <%= f.label :male %>
            <%= f.radio_button :gender, 'Female', checked: (@employer.gender == 'Female' || @employer.gender == 'female'), class: "radio-inline" %>
            <%= f.label :female %>
        </div>
    </div>
</div>

Upvotes: 0

Views: 161

Answers (2)

Neil
Neil

Reputation: 5178

I ended up with this and called it good:

my radio button solution

    <div class="col-sm-4">
        <div >
            <%= f.label :gender %> <br>
            <%= f.radio_button :gender, 'Male', checked: (@employer.gender == 'Male' || @employer.gender == 'male'), class: "radio-inline" %>
            <%= f.label :male %>
              <span> &nbsp;&nbsp;&nbsp;</span>
            <%= f.radio_button :gender, 'Female', checked: (@employer.gender == 'Female' || @employer.gender == 'female'), class: "radio-inline" %>
            <%= f.label :female %>
        </div>
    </div>

Upvotes: 0

Mike Horstmann
Mike Horstmann

Reputation: 588

  <div class="col-sm-4">
    <div class='text-center'>
        <br>
        <!-- Instead add a span here below "<br>" -->
        <span style="margin-top:5px"> <!-- start here like this -->
        <%= f.label :gender, "Gender: " %> 
        <%= f.radio_button :gender, 'Male', checked: (@employer.gender == 'Male' || @employer.gender == 'male'), class: "radio-inline" %>
        <%= f.label :male %>
        <%= f.radio_button :gender, 'Female', checked: (@employer.gender == 'Female' || @employer.gender == 'female'), class: "radio-inline" %>
        <%= f.label :female %>
  </span> <!-- and instead end it here -->
  </div>      
</div>

Upvotes: 1

Related Questions