Kích thước nhỏ hơn của các hộp f.date_select

Question

Tôi đang sử dụng 'f_date_select' của Rail với Twitter Boostrap, kết quả là giao diện bên dưới. Tuy nhiên, tôi muốn các hộp chọn được smaler (~ một nửa kích thước).

Tôi làm cách nào để thực hiện việc này?

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

Họ đang nhận được chiều rộng từ yếu tố lựa chọn trong bootstrap:

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

Để khắc phục, bổ sung của riêng bạn ở dưới cùng của các ghi đè file:

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

Vấn đề tiếp theo là áp dụng lớp cho các phần tử date_select. Nếu bạn chỉ cần ném: class => "date-select" trong đó, Rails không nhận ra rằng bạn đang cố gắng sử dụng cả hai tùy chọn và html_options. Thay vào đó, bạn phải chuyển từng mã dưới dạng băm:

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

Điều này sẽ áp dụng lựa chọn ngày của bạn cho từng đối tượng được chọn.

Answer 2

Từ bộ nhớ, phong cách chọn hộp là một cơn ác mộng kể từ khi họ có nhiều như các thành phần trình duyệt (ví dụ, họ làm cách khác nhau trong các trình duyệt khác nhau bất kể phong cách).

Vì bạn đang sử dụng Bootstrap mặc dù bạn có thể sử dụng their jQuery dropdown component và kiểu mà bạn muốn.

Bạn sẽ phải điều chỉnh mã Rails của mình cho phù hợp.