Creating inline date_select dropdowns using simple_form and zurb foundation

问题

I'm using Simple_Form with Zurb Foundation in my rails application.

One of more views has a form with the following date_select

The form fields are showing up stacked rather than inline. I've checked everything and can't figure out how to get these to show-up correctly.

What am I missing? You can see the repo at https://github.com/stanrails/momtomom in the event.html.erb view.

The code for the section is below:

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

回答1:

One of the workaround is to have something manually like this:

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

回答2:

Here is another take on this I wanted to share which ends up looking like this:

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

A little 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;
  }
}

回答3:

I solved the same problem by checking the html and changing the css of the relevant tags:

<%= f.date_select :date %> produces:

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

With "Invoice" being the model name here. Therefore, in your css you can add

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

for an easy fix.

来源：https://stackoverflow.com/questions/18178816/creating-inline-date-select-dropdowns-using-simple-form-and-zurb-foundation

标签

ruby-on-rails

zurb-foundation

simple-form