Search code examples
ruby-on-railsrubyruby-on-rails-4simple-formsimple-form-for

SimpleForm (DOB not displaying correctly)


For some reason SimpleForm is treating Date fields differently to other fields. This was the standard output after running the installs. You can see that the DOB (Date) is missing some elements I need to add:

  1. add the col-sm-3 class

class="col-sm-3 control-label

  1. Add a col-sm-9 div

<div class="col-sm-9">

GemFile

gem 'bootstrap-sass'
gem 'bootstrap-sass-extras'
gem 'simple_form'

_form.html.erb

<%= simple_form_for @firm_info, html: { class: 'form-horizontal' }, wrapper: :horizontal_form, wrapper_mappings: { check_boxes: :horizontal_radio_and_checkboxes, radio_buttons: :horizontal_radio_and_checkboxes, file: :horizontal_file_input, boolean: :horizontal_boolean } do |f| %>

    <%= f.input :last_name %>
    <%= f.input :dob %>

_form.html (result)

    <div class="form-group string optional firm_info_last_name">
            <label class="col-sm-3 control-label string optional" for="firm_info_last_name">Last name</label>
            <div class="col-sm-9">
                <input class="form-control string optional" name="firm_info[last_name]" id="firm_info_last_name" type="text">
            </div>
    </div>

<div class="form-group date optional firm_info_dob">
    <label class="control-label date optional" for="firm_info_dob_1i">Dob</label>
    <div class="form-inline">
        <select id="firm_info_dob_1i" name="firm_info[dob(1i)]" class="form-control date optional">
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                </select>
                <select id="firm_info_dob_2i" name="firm_info[dob(2i)]" class="form-control date optional">
                <option value="1">January</option>
                <option value="2">February</option>
                </select>
                <select id="firm_info_dob_3i" name="firm_info[dob(3i)]" class="form-control date optional">
                <option value="1">1</option>
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
        </select>
    </div>
</div>

_form.html (what I want it to look like)

    <div class="form-group string optional firm_info_last_name">
            <label class="col-sm-3 control-label string optional" for="firm_info_last_name">Last name</label>
            <div class="col-sm-9">
                <input class="form-control string optional" name="firm_info[last_name]" id="firm_info_last_name" type="text">
            </div>
    </div>

<div class="form-group date optional firm_info_dob">
    <label for="firm_info_dob_1i" class="**col-sm-3** control-label date optional">Dob</label>
    **<div class="col-sm-9">**
        <div class="form-inline"><select id="firm_info_dob_1i" name="firm_info[dob(1i)]" class="form-control date optional">
            <option value="2011">2011</option>
            <option value="2012">2012</option>
        </select>
        <select id="firm_info_dob_2i" name="firm_info[dob(2i)]" class="form-control date optional">
            <option value="1">January</option>
            <option value="2">February</option>
        </select>
        <select id="firm_info_dob_3i" name="firm_info[dob(3i)]" class="form-control date optional">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
        </select>
        </div>
</div>

Solution

  • simple_form.rb

    **OLD**
    config.wrappers :multi_select_date, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
        b.use :html5
        b.optional :readonly
        b.use :label, class: 'control-label'
        b.wrapper tag: 'div', class: 'form-inline' do |ba|
          ba.use :input, class: 'form-control'
          ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
          ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
        end
    end
    
    **REVISED**
    config.wrappers :multi_select_date, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
        b.use :html5
        b.optional :readonly
        b.use :label, class: 'col-sm-3 control-label'
        b.wrapper tag: 'div', class: 'col-sm-9' do |bb|
                bb.wrapper tag: 'div', class: 'form-inline' do |ba|
              ba.use :input, class: 'form-control'
              ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
              ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
            end
            end
    end
    config.wrapper_mappings = {
        check_boxes: :vertical_radio_and_checkboxes,
        radio_buttons: :vertical_radio_and_checkboxes,
        file: :vertical_file_input,
        boolean: :vertical_boolean,
        datetime: :multi_select_date,
        date: :multi_select_date,
        time: :multi_select_date
    }