Include two inputs in same LI element in Formtastic

Question

Using formtastic, I have a quantity field and unit field that asks for the quantity of the item and the unit it's measured in.

My problem, is that I would like the unit box to display along side the quantity box. However, because formtastic pust each input in it's own LI element, I can't get them to appear next to each other.

Any ideas?

Answer 1

Use an html wrapper for your quantity and unit fields:

<%= form.input :quantity,   :wrapper_html => { :class => 'fl' } %>
<%= form.input :unit,       :wrapper_html => { :class => 'fl' } %>

And in your css (probably formtastic-changes.css), a css float property to float the li. I've added a bit of right margin to give the unit label some room to breathe:

form.formtastic fieldset ol li.fl {float: left; margin-right: 2em;}

You may have to have specific classes or ids for the wrapper_html and fiddle with the css to get your layout and spacing working the way you'd like.