I am trying to have multiple text boxes on the same line.

For example:

When asking for an address I would like the city: ________ and state: ________ to be on the same line.

thanks!

Comments

noahterp’s picture

noahterp commented

I've solved this problem on multiple sites with just some CSS. Add float:left and some right margin/padding to the city's <div> wrapper for it to float to the left. Then you can optionally float the state box to the right. If these fields are inside a fieldset, then the floats will automatically clear. Otherwise, you may need a clear:both on the next form field's wrapper so that it always displays below those floats.

As an example, this is along the lines of what you may want:

#node-40 #webform-component-city
{ float:left; margin-right:30px }
#node-40 #webform-component-city .form-item,
#node-40 #webform-component-state .form-item
{ margin-top:0 }

The #node-40 object in front is so you just target this individual webform -- not others -- assuming this is node 40 and you left that id attribute alone in the node.tpl template.

Take a look at these two webforms as examples (use a CSS inspector like Firebug to see the applied styles):
http://www.umbao.org/directory/update
http://www.umbao.org/homecoming/register

quicksketch’s picture

quicksketch
he/him
commented
Category: task » support
Status: Active » Closed (fixed)

Also, see the THEMING.txt file for instructions on theming your form. Closing after lack of activity.