First off let me say I love this module, what a supreme pain in the butt it is to do this manually.

Here's my problem: My site is styled with white field labels and my field body is also white. It appears when Compact Forms magically removes and inserts my field labels inside the field body, it doesn't change the css styles associated with the label. Since both colors are white, I never see the field names appear inside the fields.

Shouldn't the module be using the same text style used in all my other form fields instead of using the style of the form labels? I mean what if i had really fancy labels for my form fields? Well, in fact fancy label style would appear inside the form field and look very strange until the user clicked and started typing. I've included a picture...

How can this be fixed without altering my theme? Thanks.

CommentFileSizeAuthor
font_issues.png4.59 KBnodecode

Comments

nodecode’s picture

nodecode commented
Title: Sites with white body text won't display the form label inside the field » form LABEL css style is used instead of form INPUT style

I figured out I can just style this particular form label to mimic my site's form input style as a workaround. Regardless, let me clarify what I'm observing:

When Compact Forms moves the field's label inside the field itself, it styles that label using the form label style when it should be using the form input style. I know this is wrong because when I start typing inside the field, the style changes to the expected form input style. Got it? Either my Zen-based theme is very screwed up or this module is not performing as expected.

STEPS TO REPRODUCE
1. Edit your site's css stylesheet like so
form label { color: purple; }
2. Navigate to a form you'd like to test, its label should now be purple (assuming the color is not overridden)
3. Enable Compact Forms for the selected form
4. Reload your form. The field label is now inside the field itself as expected but the text is purple.
5. Click in the field and start typing. The purple label disappears and the text you typed is now your site's default form input color.

It would be nice to know if anyone else is seeing this behavior.

lucascaro’s picture

lucascaro commented
Status: Active » Closed (works as designed)

Just my 2 cents,
I think the way they do it right now is the most flexible way to do it. If you want the label to look like the input text, style it using css. It's easy and gives you the chance to have a different style for the label if you wanted. Fixing it to be the same as the input field would only limit what you can do with this module.

i'd mark this as "Works as designed" since I think the label should look like it's told to look in css.