Simple_form bootstrap style inline-form not working properly

Question

I have a working twitter bootstrap install and simple form generates the following:

<form accept-charset="UTF-8" action="/find_map" class="simple_form form-inline" id="new_location" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="p5CSoidWaoGMfHY0/3ElWi0XJVg6Cqi9GqWRNlJLBQg=" /></div>
        <div class="control-group string required"><div class="controls"><input class="string required" id="location_address" name="location[address]" placeholder="Address" size="50" type="text" /></div></div><input class="btn" name="commit" type="submit" value="Find!" />
</form>

Somehow the "Find!" button won't appear on the same line as the search box. Any ideas?

Thanks!

UPDATE:

Sorry I should have mentioned that all the markup is generated by simple_form based on the following:

<%= simple_form_for @location, :url => find_map_path, :html => { :class => 'form-inline' } do |f| %>

        <%= f.input :address, :label => false, :placeholder => "Address" %>
        <%= f.submit "Find!", :class => 'btn' %>

<% end %>

So, really, there seems to be an issue with the generated markup, even though I have run the bootstrap install for simple_form, etc.

The above image shows a straight html form

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <button type="submit" class="btn">Sign in</button>
</form>

...above the one generated by simple_form.

Answer 1

I think there are a couple issues here. One is the formatting, and the way simple_form adds a <div> around the input field. @Ron's suggestion of using input_field works for me with simple_form 2.0.1. My example is searching for name in a Contacts table. The following makes the text box and button appear side by side:

<%= simple_form_for :contact, :method => 'get', 
    :html => { :class => 'form-search' } do |f| %>
  <%= f.input_field :search, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= f.submit "Find!", :class => "btn" %>
<% end %>

The other issue is that it seems simple_form usually assumes you want to work with model and field names. The example above uses a :symbol instead of a @model as the first argument as suggested here. But that still generates an input field named contact[search] so you'd have to tell your controller how to deal with that.

I think in this case it may be simpler to not use simple_form and instead use something like the form near the beginning of Ryan Bates' Railscast #240, Search, Sort, Paginate with AJAX:

<%= form_tag contacts_path, :method => 'get', :class => "form-search" do %>
  <%= text_field_tag :search, nil, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= submit_tag "Find!", :name => nil, :class => "btn" %>
<% end %>

Now the field is just named "search" and I can consume it in my controller's #index method something like this:

@contacts = @contacts.search(params[:search])

assuming I have this in my model:

def self.search(search)
  if search
    where('lower(name) LIKE ?', "%#{search.downcase}%")
  else
    scoped
  end
end

Answer 2

It's creating subforms because you're passing input to simple_form. Use input_field instead. (BTW, this also works with simple_fields_for).

Answer 3

You need to customize the control-group and controls div classes to display as inline-block when they are under a form-inline form:

form.form-inline div.control-group { display: inline-block; }
form.form-inline div.control-group div.controls { display: inline-block; }