Tạo trình đơn thả xuống date_select nội tuyến bằng cách sử dụng nền tảng simple_form và zurb

Question

Tôi đang sử dụng Simple_Form với Zurb Foundation trong ứng dụng đường ray của mình.

Một trong những quan điểm hơn có một hình thức với date_select

lĩnh vực

Các hình thức sau đây được hiển thị xếp chồng lên nhau chứ không phải là nội tuyến. Tôi đã kiểm tra mọi thứ và không thể tìm ra cách để chúng hiển thị chính xác.

Tôi đang thiếu gì? Bạn có thể xem repo tại https://github.com/stanrails/momtomom trong chế độ xem event.html.erb.

Mã cho phần nằm dưới:

<div class="row"> 
     <div class="small-5 columns"> 
      <%= f.date_select :eventDate %> 
     </div> 
    </div> 

Answer 1

Một trong những cách giải quyết là phải có một cái gì đó bằng tay như thế này:

form.custom .dropdown.date{ 
    width: 30%; 
    margin-right: 10px; 
    float: left; 
} 

Answer 2

Dưới đây là một gánh vác này tôi muốn chia sẻ kết thúc trông giống như thế này:

Một li html tinh tế!

div[class="row"] 
    div[class="large-12 columns select-date-wrapper"] 
     = f.date_select(:birthdate, 
      options = { start_year: DateTime.now.year - 18, end_year: DateTime.now.year - 75, order: [:month, :day, :year], include_blank: true}, 
      html_options = { class: 'select-date'}) 

Một chút sass!

select.select-date { 
    width: 30%; 
    margin-right: 10px; 
    float: left; 
} 
.select-date-wrapper{ 
    select:first-of-type{ 
    width: 45%; 
    } 
    select:nth-of-type(2){ 
    width: 20%; 
    } 
    select:last-of-type{ 
    margin-right: 0; 
    } 
} 

Answer 3

tôi giải quyết cùng một vấn đề bằng cách kiểm tra html và thay đổi css của các thẻ liên quan:

<%= f.date_select :date %> sản xuất:

<div class="field col-md-6"> 
    <select id="invoice_date_1i" name="invoice[date(1i)]"> 
    <select id="invoice_date_2i" name="invoice[date(2i)]"> 
    <select id="invoice_date_3i" name="invoice[date(3i)]"> 
</div> 

Với "hóa đơn" là tên mô hình ở đây. Do đó, trong css của bạn, bạn có thể thêm

#yourModel_date_1i, #yourmodel_date_2i, #yourmodel_date_3i { width: 30%; } 

để khắc phục dễ dàng.