Smaller size of f.date_select boxes

Question

I'm using Rail's 'f_date_select' with Twitter Boostrap, which results in the look below. However, I want the select boxes to be smaler (~ half the size).

How can I do this?

<%= f.label :start_date, :class => "control-label"%>
<%= f.date_select :start_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }  %>
<%= f.label :end_date, :class => "control-label"%>
<%= f.date_select :end_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }  %>

Answer 1

They're getting the width from the select element in bootstrap:

select {
  width: 220px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

To fix, add your own at the bottom of the overrides file:

select.date-select {
    width:auto;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

The next problem is applying the class to the date_select elements. If you just throw :class => "date-select" in there, Rails doesn't recognize that you're trying to use both options and html_options. Instead, you have to pass each as a hash:

<%= f.date_select :start_date, {:prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }}, {:class => 'date-select'}  %>

This will apply your class date-select to each of the three select objects generated.