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.

Answer 2

From memory, styling select boxes are a nightmare since they're more like browser components (i.e., they render differently in different browsers regardless of styling).

Since you're using Bootstrap though you can use their jQuery dropdown component and style that as much as you like.

You'd have to adjust your Rails code to suit.