By johnhanley on
I'm admittedly a middle layer web developer and know enough CSS to output pretty text, but not much else.
I have hit a wall trying to produce the following *simple* example layout
First Name: [form_textfield] Last Name: [form_textfield]
I'm building the following output string like this:
$output .= "<div class='col_form'>First Name:</div>" . form_textfield('', 'firstname', $node->firstname, 20, 20, null, null, true) . <div class='col_form'>Last Name:</div>" . form_textfield('', 'lastname', $node->lastname, 20, 20, null, null, true);
The HTML output looks like this:
<div class='col_form'>First Name:</div><div class="form-item">
<input type="text" maxlength="20" class="form-text required" name="edit[firstname]" id="edit-firstname" size="20" value="" />
</div><div class='col_form'>Last Name:</div><div class="form-item">
<input type="text" maxlength="20" class="form-text required" name="edit[lastname]" id="edit-lastname" size="20" value="" />
</div>
Yet each label and text field appear on separate lines:
First Name: [form_textfield]
Last Name: [form_textfield]
There's something about class "form-item" that's forcing the line break. I examined drupal.css, but nothing appeared obvious to me. I know it's possible to change this behavior by adding a sub class, but with what attribute?
I would be sincerely grateful if someone could help me out. Thank you.
Comments
You might try using span instead of div
I am not sure I understand the reason why but the form-item is the bane of my drupal life.
You might try using span instead of div as I believe that works in line.
Goodluck.
span didn't work
Thanks for your reply.
Unfortunately replacing div with span has no effect. I also tried wrapping the divs in span--no luck.
This is absolutely mind numbing. I'm being held hostage by a poorly implemented style class.
I'm stuck with 4.6 for now and have to find a solution.
DIV, by default, is a block
DIV, by default, is a block element. Unless you do something special with it, it will always sit on it's own line. You want something like this:
http://www.disobey.com/
http://www.gamegrene.com/
http://www.disobey.com/
Lessons Learned
After hours of disecting Drupal 4.6 form functions and styles, I have finally learned how to make it play nice when laying out form elements using CSS.
My solution is to override several styles found in drupal.css combined with using nested container divs.
The source of much confusion and frustration is class 'form-item'. I overrode the margins and set them to 0 and changed the display of br tags to 'none'. This also has the added benefit of placing radio and checkboxes in a row and not stacked (yuck.)
I wanted left justified labels (instead of stacked.) To accomplish this, leave the title argument blank when defining a form element. Example:
Then add your own label class to the output string:
The outputted HTML looks like this:
You'll noticed some additional classes:
form-row
form-col
These are custom container divs to get everything lined up nicely, both vertically and horizontally. This is especially important when putting multiple inputs on one line.
The 3rd div 'form-text' is another lovely one defined by drupal.css for text fields. For some odd reason the width is set to 95%, making all text fields stretch across nearly the whole display area. So, no matter what you define your field size as, this class will override it. This is expected behavior of styles, but WHY it's there in the first place we may never know. Perhaps the designer thought only 1 text field per row would ever be needed (sheesh!) Disable this behavior by setting the width to 'auto'.
Oh, put all your custom styles in a separate style sheet and load it when needed. Other modules depend on the original drupal.css classes as designed.
Anyway, hopefully this info will save someone else time. Some CSS guru might have a more efficient way to go about it. I'm all ears. :-)