simple_form have form items appear in a row without a newline?

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

I can't add a comment to the person above because I don't have the reputation, but just grab the inputs by specifying the class of the level above, then use a mixin that you've giving form-control's styles to make it the same as form-control:

.form-group input {
  @include form-control-styling
}

Answer 2

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.

Answer 3

The latest version of bootstrap has a form-inline class.

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

You can also create custom wrappers. This is the markup from bootstrap's documentation:

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  ...
</form>

So, if you created a custom wrapper (something like):

SimpleForm.setup do |config|
  config.wrappers :bootstrap, :tag => 'div', :class => 'form-group' do |b|
    b.use :label
    b.use :input
  end
end

This should do most of what you need. The part that I still have not worked out is how to add 'form-control' class to the inputs.