Creating inline date_select dropdowns using simple_form and zurb foundation

9
votes

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>
3
ruby-on-railszurb-foundationsimple-form
I took what you had in the event.html.erb and just made it pure html with foundation and I did not have any display issues. Could you possibly throw up a screenshot showing what issue you are seeing. A jsbin with the rendered HTML markup would be helpful as well. – zmanc

3 Answers

4
votes

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

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

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

enter image description here

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;
  }
}
0
votes

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.