Individual field inline-label support

This makes logical sense because we can support better theming in D7 than we had in D6. However I think generally the options for "Below" and "Below Inline" are unnecessary. Webform is meant for end-users not developers for which the full set of options was created. I think these options make the most sense:

- Above
- Inline
- Hidden

We also can't use such advanced CSS as this:

+.webform-component-select > label.option + .form-checkboxes,
+.webform-component-select > label.option + .form-radios {
+  display: inline-block;
+  vertical-align: top;
+}

A very-related issue: #255356: Option for putting label and field on same line (inline). I'm not sure which one to close, each takes a different approach. I think it makes more sense for labels to be form-wide when it comes to positioning, but I definitely see the appeal of re-using our existing label option. It puts the option where users expect the option to be, makes it more in-line with Drupal core, and it doesn't add any complexity to our existing code.

Is supporting IE6 a priority for this module? Is that why the CSS you quoted in #1 can't work?

Yes the Webform project should still support IE6 (even if the Form Builder project does not). Additionally the "+" selector is not fully supported even in IE7 and IE8 (http://www.quirksmode.org/css/contents.html), and I'd prefer to avoid use of it anyway considering it's legibility.

Here's the approach I would prefer to take for this issue. Only 3 options will be supported (Inline, Above, Hidden). No option yet but it shows how easy this is to add to our theming, no special CSS required.

After generalizing this a bit I'm feeling really good about this patch. This patch now does all of the following:

- Provides two new "features" that can be specified in hook_webform_component_info: "title_display" and "title_inline".
- Fields that do not support title display (markup, hidden) have title options omitted entirely.
- Those that support "Inline" display select lists with 3 options for Above, Inline, and Hidden.
- Those that do not support inline (textarea, grid) are shown a checkbox for "Hide title" just like the current options.
- Fixes fieldset title hiding (#1042642: Fieldset Titles Cannot be Hidden).
- Works in both D6 and D7.

I've committed this patch for starters.

Will this patch be applied to a new version of Webform 6.x, or will it only be available as a patch?

Yes, as it's marked "fixed" it's already included in the 3.x versions (as I said in #7, that's what "committing" means). The 3.10 version (due out soon) will include this functionality.

Great! Sorry about that, still familiarizing myself with some of the development lingo.

I actually got out 2 versions (3.10 and 3.11). This functionality is included in 3.11 only, it's available now from the project page.

Well, I just installed 3.11 on Drupal 6.20, and I see the new drop-down per-field options (Above, Inline, None), but it isn't working--the label shows up Above the field whether I have Above or Inline selected.

Choosing None does, however, hide the label completely.

Have you run update.php since updating? That should clear your caches, though clearing Drupal caches might not also be a bad idea. Since the inline fields require CSS changes, they need to be flushed.

Subscribing

I had already run update.php, but I had CSS compression turned on at the time. I just tried turning CSS compression off, re-ran update.php; no dice.

Then I tried actually clearing all Drupal caches...nope.

I even tried clearing my browser cache, cookies, history, etc...nope.

HOWEVER, then I tried switching the theme from CTI Flex back to Garland, and voila, it works!

Switching back to CTI Flex kills the in-line layout again, however.

Any suggestions?

Use Firebug to determine what CSS in your theme is prevent Webform from displaying the fields inline. Because the theme CSS is always added last, it takes precedence over the CSS added by modules. Something in the theme CSS (probably style.css) is forcing the fields to display as blocks even though Webform is trying to display them inline.

Bingo! Yep, it turns out that the CTI Flex theme has a specific forms.css file which includes this line:

.form-item label /* The label for a form element */ {
  display: above;
  font-weight: bold;
}

All I had to do was remove the display: above; bit and it works, thanks!

I also had to tweak the css code a bit to space the fields out. I understand that getting the fields to line up horizontally via the interface would be a pain, but I was able to further customize the forms.css file with the following, which works nicely:

.form-item label /* The label for a form element */ {
  font-weight: bold;
   float: left;
   width: 15em;
   margin-left: 5px;
   margin-right: 5px;
   text-align: right;
}

Hmmm...ok, well, adding the last bit of code has the unfortunate effect of causing EVERY label on EVERY form to shoot out to the right...including all administrative/editing pages, which makes for an awkward layout.

Oh well...it's still much better than it was. Thanks again!

Aha!

OK, I figured out how to get the labels to line up neatly (right-justified) while the fields are lined up neatly (left-justified) *without* messing up the layout of admin editing pages.

In modules/webform/css/webform.css, just change the following:

.webform-container-inline label {
  display: inline;
  margin-right: 1em;
}

...to this:

.webform-container-inline label {
  display: inline;
  margin-right: 1em;
   float: left;
   width: 15em;
   text-align: right;
   margin-top: 5px;
}

The tricky part is setting the width to 15em, since the best width for the labels will vary depending on the form (you don't want it sticking out too far, but you also don't want a long label to wrap around to another line).

The 5px top margin keeps the label from displaying slightly higher than the field...not sure if this is a browser-specific thing, but it fixes it for Safari and Firefox on OS X.

Here's an example of what it looks like for me using Webform 3.11, with all fields set to Inline, *and* with the webform.css edit I made above:

http://www.mercy-mhub.net/alumnae_survey

Hope this helps others?

One final note: I discovered that if you include a Photo Upload field using the above edits, it causes the formatting of the next field below it to get messed up in Firefox and IE (because, unlike Safari, which only adds an upload button, FF and IE also display a text field). The only solution I came up with was to make the Photo Upload field the last one in the fieldset.

Subscribing