How to place automatically created select fields in horizontal layout using simple_form

1
votes

Using Rails 4 with Simple Form & Zurb Foundation 5.

I'm stuck getting Simple Form to wrap divs around the automatically created select fields when using the input date_of_birth. The code I have so far is below:

<div class = "row">
<div class = "medium-12 columns">
    <%= form.input :date_of_birth, as: :date, 
                                   end_year: Date.today.year - 2, 
                                   start_year: Date.today.year - 90, 
                                   order: [:day, :month, :year]%>
</div>
</div>

This Simple Form code creates this (pic) with the output HTML looking like:

<div class="row">
<div class="medium-12 columns">
    <div class="input date optional person_date_of_birth">
        <label class="date optional control-label" for="person_date_of_birth_3i">Date of birth</label>
        <select class="date optional" id="person_date_of_birth_3i" name="person[date_of_birth(3i)]">
            <option>...</option>
        </select>
        <select class="date optional" id="person_date_of_birth_2i" name="person[date_of_birth(2i)]">
            <option>...</option>
        </select>
        <select class="date optional" id="person_date_of_birth_1i" name="person[date_of_birth(1i)]">
            <option>...</option>
        </select>
    </div>
</div>
</div>

I want it to look like this (pic) with HTML output something like the below where each select field is wrapped in a div so I can specify grid size.

<div class="row">
<div class="medium-12 columns">
    <div class="input date optional person_date_of_birth">
        <label class="date optional control-label" for="person_date_of_birth_3i">Date of birth</label>
        <div class="medium-4 columns">
            <select class="date optional" id="person_date_of_birth_3i" name="person[date_of_birth(3i)]">
                <option>...</option>
            </select>
        </div>
        <div class="medium-4 columns">
            <select class="date optional" id="person_date_of_birth_2i" name="person[date_of_birth(2i)]">
                <option>...</option>
            </select>
        </div>
        <div class="medium-4 columns">
            <select class="date optional" id="person_date_of_birth_1i" name="person[date_of_birth(1i)]">
                <option>...</option>
            </select>
        </div>
    </div>
</div>
</div>
2
ruby-on-railsrubyzurb-foundationsimple-form
a jsfiddle might help.. have u tried using float: left ? – Lenin Raj Rajasekaran
Would it help if you can add the classes medium-4 columns to the select tag? – usha
@emaillenin float:left didn't work. – David M
@Vimsha - Adding the medium-4 columns class to the select tag gets them all on the same row but the spacing ends up a bit funny. Might have to go this path if there's no way to wrap them in div tags. How do I pass this class to each select field using Simple Forms code above for date_of_birth? Thank you. – David M

2 Answers

0
votes

use input_html option to add the classes to each select 

<div class = "row">
<div class = "medium-12 columns">
    <%= form.input :date_of_birth, as: :date, 
                                   end_year: Date.today.year - 2, 
                                   start_year: Date.today.year - 90, 
                                   order: [:day, :month, :year],
                                   input_html: {class: "medium-12 columns"}%>
</div>
</div>

Have a look at this post to add the div using jquery on document load like

$('select[id*="date_of_birth"]').wrapAll('<div class="medium-12 columns">');
0
votes

Can just use CSS too:

  .medium-12.columns select {
    display: inline-block;
    width:33%;
  }