ruby-on-rails - 使用 simple_form 和 zurb 基础创建内联 date_select 下拉菜单

Question

我在我的 Rails 应用程序中使用 Simple_Form 和 Zurb Foundation。

多个视图之一的表单具有以下 date_select

表单字段显示为堆叠而不是内联。我已经检查了所有内容，但无法弄清楚如何正确显示这些内容。

我错过了什么？您可以 在 event.html.erb 视图中查看https://github.com/stanrails/momtomom上的 repo。

该部分的代码如下：

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

Answer 1

一种解决方法是手动进行如下操作：

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

Answer 2

这是我想分享的另一种看法，最终看起来像这样：

一个小html！

  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'})

有点骚！

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

我通过检查 html 并更改相关标签的 css 解决了同样的问题：

<%= f.date_select :date %>产生：

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

“发票”是此处的型号名称。因此，在您的 CSS 中，您可以添加

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

一个简单的修复。