How to place month, date, year of f.date_select on single line?

Question

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?

Answer 1

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

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

Answer 2

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

Answer 3

<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