使用simple_form和zurb基础创建内联date_select下拉列表

Question

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

其中一个视图的表单包含以下date_select

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

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

该部分的代码如下：

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

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

我通过检查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>

“Invoice”是这里的型号名称。因此，在你的CSS中你可以添加

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

轻松修复。