views:

546

answers:

4

I am trying to create a form in drupal 6 that has multiple items on the same line. More specificly, I want a right alligned form what has a textfield, dropdown-box, and button all on the same line.

I know how to create the items, but drupal tends to put them all on seperate lines. How do I put it on one line?

Thanks

+2  A: 

You'll need to use CSS to position them. Each of them should be in their own div, so it shouldn't be too hard.

P.S. Hard-coding something to be on the same line in your markup is not a good idea. You should always do layout and positioning in your CSS and leave the markup just for outputting items to the page.

theunraveler
+1 - CSS is the way to go here.
Henrik Opel
+1  A: 

Of course I agree with the previous answer: CSS is the way to go!. The real question is though: where should you put the CSS bits?

I would strongly suggest to put it in a separate .css file, as this will ease a lot the life for other people involved in the project, and keeps the code portable to another theme, when/if the time for a restyling will come. It is pretty easy to do as each from element is generated with its own wrapping div. The function you need to use to tell drupal to use a given .css file (if you don't add your styles to an existing one) is drupal_add_css().

That said, if you still want/need/must tweak the behaviour you mentioned from the code generating the form, I would suggest you use the #prefix and #suffix properties of the $form array. These are common to all the form elements and allow you to inject HTML directly into the rendered form (prefix before a given element, suffix after it, of course). This way you could put in the place you need both html elements such <div>'s and <span>'s and CSS via the <style type="text/css"> tag.

I want to emphasize though, that the first solution (external CSS file) is way better.

Hope this helps!

mac
A: 

The Drupal Forms API usually outputs each element using a wrapper div element, set with the class name 'form-item'.

eg.

<div class="form-item">

  <label> ... </label>
  <input> ... </input>
  <div class="description"> ...</div>

</div>

To get three elements to sit next to each other, you'll need to set the width (so that the element are narrow enough to fit on one line), and apply a 'float: left;' using div.form-item as your CSS selector.

To ensure that the elements clear properly, apply 'overflow: hidden;' to the parent element which contains the three form elements.

codeinthehole
A: 

While I agree that often CSS is the right way to theme the form, sometimes you need stronger methods. I wrote an article about theming complex forms with tabular information, like a list of people with fields for their names and SSNs all printed on one line.

Maine