Mniejszy rozmiar f.date_select skrzynek

Question

używam Rail „f_date_select” z Twittera Boostrap, co skutkuje w poniższej wygląd. Jednak chcę, aby wybrane ramki były mniejsze (~ połowa rozmiaru).

Jak mogę to zrobić?

<%= 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

Są coraz szerokość z zaznaczonym elementem w bootstrap:

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

Aby naprawić, dodać własne na dole nadpisania pliku:

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

Kolejnym problemem jest stosowanie klasa do elementów date_select. Jeśli po prostu wyrzucisz: class => "date-select", Rails nie rozpoznaje, że próbujesz użyć zarówno opcji, jak i opcji html_. Zamiast tego, trzeba przejść każdy jako hash:

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

ten będzie miał zastosowanie datę zaznaczenie do każdego z trzech wybranych obiektów generowanych klasy.

Answer 2

z pamięci, stylizacji wybierz pola są koszmarem, ponieważ są one bardziej jak komponentów przeglądarki (tj sprawiają one różnie w różnych przeglądarkach niezależnie od stylizacji).

Ponieważ używasz Bootstrap choć można użyć their jQuery dropdown component i stylu, że jak chcesz.

Będziesz musiał dostosować swój kod Rails, aby odpowiadał.