I have a view new.html.erb

<div class="container">      
<div class="row">
<div class="col-md-4 col-md-offset-4">
.
.
<%= f.label :date_of_birth %><br />
<%= f.date_select :date_of_birth, { :start_year => 1920, :end_year => 2010 }, :class => 'form-control date-select' %>
.
.
</div>
</div>
</div>

The view new.html.erb gets displayed as follows

I am using Twitter Bootstrap and I am not using Devise gem.
Is there any way that I can display all three listboxes on the same line?

I have a view new.html.erb

<div class="container">      
<div class="row">
<div class="col-md-4 col-md-offset-4">
.
.
<%= f.label :date_of_birth %><br />
<%= f.date_select :date_of_birth, { :start_year => 1920, :end_year => 2010 }, :class => 'form-control date-select' %>
.
.
</div>
</div>
</div>

The view new.html.erb gets displayed as follows

I am using Twitter Bootstrap and I am not using Devise gem.
Is there any way that I can display all three listboxes on the same line?

• javascript
• css
• ruby-on-rails
• ruby-on-rails-4

• What HTML did you exclude . . . ? – dfsq Commented Nov 12, 2014 at 21:16
• I skipped the name, email, gender, password, password confirmation. – LovingRails Commented Nov 12, 2014 at 21:18

4 Answers 4

Your selectboxes have form-control class which defines width: 100% and display: block. It means to makes them all take same line you should wrap selectboxes with one more container and then make them inline/inline-block and set some width:

<div class="col-md-4 col-md-offset-4">
    ...
    <label>Date of birth</label> 
    <div>
        <select name="date_of_birth" class="form-control date-select"></select>
        <select name="month_of_birth" class="form-control date-select"></select>
        <select name="day_of_birth" class="form-control date-select"></select>
    </div>
    ...
</div>

And define this CSS styles for .date-select class:

.date-select { 
    display: inline-block;
    width: 30%;
}

Illustration: http://plnkr.co/edit/00izoqhM3nfquNieFNwe?p=preview

If you're using simple_form and bootstrap, this works:

.date select.date.form-control { width: auto; }

<div class="form-inline">
<%= f.label :expiry_date %><br>    
<%= f.date_select :expiry_date , { discard_day: true }, { :class => 'form-control' } %><br/>     

Wrapping the data_select in the .form-inline does the trick. This is also the bootstrap prescribed way of generating inline forms. It changes the width: 100% to width: auto thereby allowing for elements to be placed next to each other

This is more of a CSS issue than a ruby/rails issue, but off the top of my head, I would use CSS to float all of them onto the same line by just adding an additional class, then adding:

.whatever-class { dispaly: inline; }

to all of the elements above.