Geek asks and answers

Smaller field size f.date_select

I use Rail 'f_date_select' with Twitter Boostrap, which leads to the discussion below. However, I want the selection fields to be smaller (about 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' }  %>

+5
source share
2 answers

They get the width from the select element at boot:

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 date_select elements. If you just throw: class => "date-select" there, Rails does not recognize that you are trying to use both parameters and html_options. Instead, you should pass each as a hash:

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

date-select .

+10

- , (.. - ).

Bootstrap, jQuery , .

Rails, .

+1

More articles:


All Articles