Floating labels not working

Anyone? I have confirmed it is not a caching issue or a plugin conflict.

The Display Settings page says, “Note that if the “Disable CSS” option is enabled, you will need to style the floating labels yourself.” I do not see a “Disable CSS option” Maybe this is now called “Default Give Styles”?

In any case, I have no clue why they are not working. Any help?

Hey @metallikat36 – Apologies for the delayed reply here. That’s strange that they just stopped working. Have you tried moving the JS scripts from the header to the footer? You can do that by going to WP-Admin > Settings > Advanced > Script Loading Location and changing from “Head” to “Footer”.

• This reply was modified 7 years, 3 months ago by Devin Walker.

No, I had not tried that. But unfortunately, that doesn’t fix it.

The labels might have stopped working months ago and I just never noticed.

• This reply was modified 7 years, 3 months ago by metallikat36.

Hmm, ok. Thanks for trying. Has anything changed in the theme or environment at all? Which version of Give are you running? The latest?

I’m running the latest Give (Version 1.8.16).

I can’t think of anything relating to the theme or server that has changed. I just tried switching to Twenty Sixteen theme right now, but no luck.

Would it be worth deleting and reinstalling the plugin? I have selected the option to retain settings and data on deletion. Reinstalling, at worst, should just make me need to readd a widget to my sidebar I think. Would you agree?

If logging into my dashboard would be of use, you can send me an email address I can send login info to.

• This reply was modified 7 years, 3 months ago by metallikat36.

You could try that but I doubt it would help anything. Try rolling back using this plugin to the previous version to see if that helps: https://www.ads-software.com/plugins/wp-rollback/

If that fixes it then we at least know that the latest update caused the issue and can begin working from there. If it doesn’t, likely it could be another update or outside Give related issue causing the complication.

Version 1.8.12 and before works.
Version 1.8.13 and after does not work.

That is the break point, so it seems a bug was introduced in 1.8.13

That is really a great debugging tool! This can help me prove to some other developers that the bug is with their plugin and not my hosting service =).

I do think around this time you guys simplified the Display Options quite a bit. Seems suspicious.

• This reply was modified 7 years, 3 months ago by metallikat36.

That gives us something to work with. Let me see if there was a change specifically made in that version that could have broken your setup.

@metallikat36 — can you create a new form and enable Floating Labels on that just so we can see the problem live? That would help us to continue troubleshooting.

Here are two forms. The first is modal. The bug only seems to occur on the modal form:

https://www.earthmedresearch.org/donations/floating-labels-test-1/
https://www.earthmedresearch.org/donations/floating-labels-test-2/

My custom CSS also seems not to apply to the floating label now either. It seems you guys changed the selectors. This is what I have as of now:

form.floated-labels .floatlabel.is-focused label.floatlabel-label

What are the new selectors?

• This reply was modified 7 years, 3 months ago by metallikat36.

Thanks for that @metallikat36

1) So you’re saying that you’ve enabled Floating Labels on the “floating-labels-test-1” form and it’s just not working correctly at all. Is that right?
2) Can you provide the full CSS that you’re applying so I can tell what is NOT working correctly.

Once I have those two things I can test in more detail and have an more actionable response. Thanks!

Correct. I have floating labels enabled both locally and globally. I assume you can see on your end that floating-labels-test-1 does not have any floating labels on the modal window that opens up.

The only CSS I am applying to the floating labels (that used to work at some point) is as follows:

form.floated-labels .floatlabel.is-focused label.floatlabel-label {
color: #af0069; }

That should be a magenta color. But as you can see in floating-labels-test-2, the labels have a default blue-ish color.

If you would like, I could also try rolling back the plugin to determine when the color stopped applying correctly on that non-modal form (i.e. floating-labels-test-2). That may give you a second piece of info. The first piece of info I gave you was based only on observing which version had modal forms lose the label completely. Hence in that case I had no opportunity to observe a change in color.

• This reply was modified 7 years, 3 months ago by metallikat36.
• This reply was modified 7 years, 3 months ago by metallikat36.
• This reply was modified 7 years, 3 months ago by metallikat36.
• This reply was modified 7 years, 3 months ago by metallikat36.
• This reply was modified 7 years, 3 months ago by metallikat36.
• This reply was modified 7 years, 3 months ago by metallikat36.

Great, digging into it now. I’ll update you soon. Thanks!

OK, I replicated the modal issue and that’s definitely a bug. I’ll file an issue on that now.

For the floating label color, yes, the floating labels library itself changed the class names. Instead of “.is-focused” it should be “.has-focus”, so here’s the new full code:

[id*="give-form"] .fl-form .fl-has-focus label.fl-label {
   color: #af0069; 
}

Most likely you could just adapt your class structure from above, but I think that one will prove more stable for you.

We’ll keep you posted on the modal/floating labels issue. Thanks!

Thanks again for reporting that. I created this issue here which you can follow along with our progress on it:
https://github.com/WordImpress/Give/issues/2341

Thanks!