CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3formtastic
Mellon
Mellon

Reputation: 38842

formtastic semantic form layout 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 %>
      ...

Upvotes: 1

Views: 1957

Answers (3)

Justin French
Justin French

Reputation: 2865

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.

Upvotes: 1

Ant
Ant

Reputation: 3887

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)

Upvotes: 0

Jeffrey W.
Jeffrey W.

Reputation: 4169

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.

Upvotes: 0

Related Questions