Inline form not showing up properly

163 views
Skip to first unread message

Abram Bailey

unread,
Apr 23, 2012, 6:51:54 AM4/23/12
to plataformate...@googlegroups.com
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!

Carlos Antonio da Silva

unread,
Apr 23, 2012, 7:37:45 AM4/23/12
to plataformate...@googlegroups.com
I think you need to wrap the button in a div.form-actions or something like that - I don't remember exactly :D, please take a look on bootstrap examples.

-- 
At.
Carlos Antonio

Abram Bailey

unread,
Apr 23, 2012, 4:26:41 PM4/23/12
to plataformate...@googlegroups.com
Thanks Carlos, but I think this is a bug in simple_form... See my post @ http://stackoverflow.com/questions/10279164/simple-form-bootstrap-style-inline-form-not-working-properly

Carlos Antonio da Silva

unread,
Apr 23, 2012, 4:58:23 PM4/23/12
to plataformate...@googlegroups.com
Sorry, but I don't think so, it's just how SimpleForm works. According to your form:

<%= 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 %>

The f.input call does use SimpleForm stack, which will create a wrapper div and be styled as twitter bootstrap expects. But f.submit has nothing to do with SimpleForm, it's a bare Rails method, and does not create any extra markup. SimpleForm cannot guess the final markup you want, it just has some defaults and you have to customize them if you want to go further.

The problem is the final markup you want. If you want a simple markup, in this case, just ignore SimpleForm and go straight to Rails' form_for and f.text_field helpers.

-- 
At.
Carlos Antonio

mcbsys

unread,
May 16, 2012, 6:11:40 PM5/16/12
to plataformate...@googlegroups.com
I posted an answer on StackOverflow but will repost here. Antonio, maybe you can explain why "input_field" doesn't wrap the field in a <div>. The simple_form wiki refers to rdoc for info on input_field, but I couldn't find it in the rdoc.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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 %>
 
<p>
   
<%= text_field_tag :search, nil, :placeholder => "Name",
       
:class => "input-medium search-query" %>
   
<%= submit_tag "Find!", :name => nil, :class => "btn" %>
 
</p>
<% 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

Carlos Antonio da Silva

unread,
May 18, 2012, 8:07:09 AM5/18/12
to plataformate...@googlegroups.com
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 <div> 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 to work with a namespace, being it 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.

ps: I'll reply the same on stack overflow. Cheers.

-- 
At.
Carlos Antonio

mcbsys

unread,
May 18, 2012, 12:51:57 PM5/18/12
to plataformate...@googlegroups.com
Antonio, thanks for the clarification and confirmation!

Mark

Carlos Antonio da Silva

unread,
May 18, 2012, 1:48:41 PM5/18/12
to plataformate...@googlegroups.com
No problem :)

-- 
At.
Carlos Antonio

Reply all
Reply to author
Forward
0 new messages