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.

enter image description here

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.

You can't modify the markup? The input button needs to be inside the `.controls` div in order for it to sit next to the input field. — Andres I Perez, Apr 23 '12 at 12:42
Actually, that would make life easy, but divs are generated by simpleform. Thanks! — Abram, Apr 23 '12 at 20:22
If you can't modify the markup than you will have to rely on hacky methods, like this one: `input { float: left; }`. — Andres I Perez, Apr 23 '12 at 20:26

score 20 · Accepted Answer · edited May 23 '17 at 12:06

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

How would one correctly add form labels with this above code? f.label "label" does not blends in the layout and shows off — Rubytastic, Jun 10 '12 at 13:36
@rubytastic, since SimpeForm is not creating the label for you (see also the first sentence of Carlos Antonio's answer), you will probably need to format the label on your own. You could try "borrowing" some styles from Bootstrap and/or SimpleForm (maybe `label class="control-label">My label`), or write your own CSS so that it blends in. — Mark Berry, Jun 11 '12 at 21:08

score 14 · Answer 2 · answered Apr 30 '12 at 23:02

14

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

answered Apr 30 '12 at 23:02

Ron

1,166
5
15

score 5 · Answer 3 · answered Nov 09 '12 at 12:09

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

score 2 · Answer 4 · edited Feb 13 '20 at 05:03

Adding to Mark's reply:

So, input_field exists to create the input component only, it won't give you any sort of label/error/wrapper. That means you won't get any or tag wrapping the field, you should do that manually in case you want to.

Now about using the form with an object, SimpleForm is a FormBuilder, which means it was created to work with a namespace, either an object or a symbol. SimpleForm's simple_form_for == Rails' form_for, you always need an object namespace to work with.

For such a simple case as a search form, you're better off with simple form helpers such as form_tag, as you've pointed out. There's no need to rely on simple_form_for or form_for for that, I agree and I usually go down that path.

I hope that helps, let me know if you still have doubts.

Thx for clarification, I tried to add :label => "" which isn't working and you explain why above. Would you know perhaps how to add a label with the correct styling of twitter bootstrap? just f.label ="my label" messes up the layout then the label is off-placed. Thx ! — Rubytastic, Jun 10 '12 at 13:38

score 1 · Answer 5 · answered Apr 23 '12 at 20:50

1

Change the :html => { :class => 'form-inline' } to :html => { :class => 'form-horizontal' }

answered Apr 23 '12 at 20:50

Lauro Caetano

126
3

That worked for me: the field name and the input box are now side-to-side, although there's now a fairly wide horizontal space before the field name. – Teemu Leisti Mar 05 '13 at 06:42

score 0 · Answer 6 · answered Apr 23 '12 at 17:35

can't you move the input button next to input address? I think it will solve the problem

<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" />

        <!-- move the button to here -->
        <input class="btn" name="commit" type="submit" value="Find!" />
    </div>
      </div>

</form>

score -4 · Answer 7 · answered Jun 12 '12 at 08:09

-4

Please, all people with this problem, don't use fluid layout and be sure you are specifying the HTML5 doctype to the documents.

answered Jun 12 '12 at 08:09

Fran García

2,011
16
24

Simple_form bootstrap style inline-form not working properly

7 Answers7