simple form bootstrap horizontal and inline

8
votes

I'm working with simple_form + bootstrap, but wanted to know whether it was possible to make some of the fields go inline and others under the label in the same form.

I would potentially like to even make a form into two columns or more.

Is there a way to achieve this through either wrappers or maybe through a different form builder or styling?

Thank you!

3
ruby-on-rails-3twitter-bootstrapsimple-form

3 Answers

18
votes

The solution that I have found includes using the 'row' and 'span' classes provided by bootstrap and inserting them into the various fields using the 'wrapper_html' provided by simple form.

Example:

.container
    ...
    = simple_form_for(@stuff, :html => { :class => 'form-horizontal' }) do |f|
      = f.error_notification

      .form-inputs.row
        = f.input :name, :wrapper_html => { :class => 'span6' }
        = f.input :contact_name, :wrapper_html => { :class => 'span6' }

      .form-inputs.row
        = f.input :contact_email, :wrapper_html => { :class => 'span6' }
        = f.input :contact_phone, :as => :string, :wrapper_html => { :class => 'span6' }

You can read up in the Docs about bootstraps grid system: http://twitter.github.com/bootstrap/scaffolding.html

Or check out some examples of bootstrap and simple form integration: http://simple-form-bootstrap.plataformatec.com.br/articles/new

Hope that helps!

0
votes

You can always arrange the fields as per your liking by modifying the style of the form elements. Refer to any of the google search results of 2 column layouts. For example - this

0
votes

You can also append the field to the wrapper (worked for me):

 .container
     ...
     = simple_form_for(@stuff, :html => { :class => 'form-horizontal' }) do |f|
       = f.error_notification

       = f.input :postal_code, :label => 'Postal code, house number', :wrapper => :append do 
         = f.input_field :postal_code
         = f.input_field :street_number