Question

Would it be possible to write a wrapper or style simple_form so that form elements are next to each other all on one line?

What needed is like this:

search for: [ input text field ] country [ drop down textfield ] city [ drop down textfield ]

Im using

• simple_form 2
• twitter bootstrap 2

You currently can set .form-horizontal or .form-vertical, would the best way to get a “inline 1 row form elements display” by adding rules to CSS or create a simple_form wrapper?

Update some haml/css:

= simple_form_for(@session, :html => { :class => 'form-horizontal' }) do |f|


  = f.input :age_from,
            :collection => 18..60,
            :default => 18,
            :blank =>false,
            :label => 'Age from',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" },


  = f.input :age_to,
            :collection => 18..60,
            :default => 25,
            :blank => false,
            :label => 'Age to',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" }

Using the regular bootstrap css nothing more yet.
the item_wrapper_class is not working for a whole element just for like a single radio button in a collection.

I need a good way to wrap the complete collection elements inline ( age to and age from )

Answer 1

You can either use .form-horizontal (for me the easiest and clean solution) or write a custom input or custom form builders. Check the documentation at https://github.com/plataformatec/simple_form.