formtastic semantic form layout question

Question

In formtastic, when create a semantic form, the layout of the object's attributes are always listed vertically (one attribute label & value occupy one row) by default.

How to customize the layout so that part of the attributes could be in horizental position. For example, I would like to have " body " attribute located on the right side of " title ". How to do that?

<% semantic_form_for @post do |form| %>
    <% form.inputs do %>
      <%= form.input :title %>
      <%= form.input :body %>
      <%= form.input :section, :as => :radio %>
      ...

Answer 1

Formtastic provides lots of HTML class and id hooks on the wrapper <li> and elsewhere so that you can style different types of inputs generically (eg li.string ) or specific inputs differently (eg li#user_email_input ).

You can, as other answers mentioned, add extra classes to the wrapper with :wrapper_html => { :class => 'whatever' } to give yourself new hooks when the options above aren't suitable.

From here, it's purely a style/CSS problem. You probably want to float the <li> wrappers against each other with float:left; and then clear the floats on the containing <ol> with overflow:auto; or any other clearing technique of your preference.

Answer 2

You can use CSS to accomplish this task:

<%= form.input :title, :wrapper_html => {:class => "left"} %>

Then in your stylesheet:

.left
{
  float: left;
  /* etc. */
}

This will style the container of the form element (li by default)

Answer 3

You'd simple have to change the CSS. However I suggest you just build up the form elements yourself if you need layout customization for specific attributes.