Question

I have a bunch of partials that I want to render horizontally, using form-inline (twitter bootstrap). If specified individually they work fine, but when specified using :defaults, the class doesn’t appear.

%ul.nav.nav-tabs#tab
  %li= link_to "General", "#client_tab1", 'data-toggle'=>"tab"
  %li= link_to "Applications", "#client_tab2", 'data-toggle'=>"tab"
= simple_form_for @client, defaults:{input_html:{class:'form-inline'}}, :html=>{:class=>"client tab-content"} do |f|
  #client_tab1.tab-pane.fade.in.active
    = render :partial => "client", :locals => {:f => f}
  #client_tab2.tab-pane.fade.in
    = render :partial => "applications/applications", :locals => {:f => f}
  .actions
    = f.button :submit, class:"btn-primary", value: "Save"

and the partial looks something like:

.status
  .span3
    = f.label :status
    = f.collection_select :status_id, selection_list(Status), :last, :first
    %br
    = f.input :open_date, :as => :jdate
    %br
    = f.label :assigned_to
    = f.collection_select :assigned_to_id, selection_list(User), :last, :first
    %br
    .form-inline
      = f.label :assistant
      = f.collection_select :assistant_id, selection_list(User), :last, :first
    %br

In the above, with explicit .form-inline, all works as expected. But according to the sample code below from https://github.com/plataformatec/simple_form, classes defined in :defaults should be applied to all methods. In fact, they aren’t.

<%= simple_form_for @user, :defaults => { :input_html => { :class => 'default_class' } } do |f| %>
  <%= f.input :username, :input_html => { :class => 'special' } %>
  <%= f.input :password, :input_html => { :maxlength => 20 } %>
  <%= f.input :remember_me, :input_html => { :value => '1' } %>
  <%= f.button :submit %>
<% end %>

Can anyone explain why this might be or what I’m doing wrong?

Answer 1

Several things:

1. From reading the twitter bootstrap documentation, it looks like the form-inline class works when applied to the parent element to the input field, such as a form element or, in your example, a div.

You can see that here (taken from the stylesheet):

.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  *zoom: 1;
}

1. I read the simple_form documentation to mean that the defaults will only be applied to f.input methods. I think this means that this means what’s provided to input_html will be applied to all the elements generated by f.input, including the label and the input field itself. However, it doesn’t look like f.input generates any parent element to the input field, like a div.

So, since twitter bootstrap only applies the style when there’s a parent element, like a div, whose class is form-inline, it won’t matter if form-inline is applied to the input field.

It doesn’t seem like it adds too much to just keep .form-inline in the partial, why not just keep it there?