Support » Plugin: GiveWP - Donation Plugin and Fundraising Platform » Floating labels not working

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter metallikat36

    (@metallikat36)

    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?

    Plugin Author Devin Walker

    (@dlocc)

    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 3 years, 5 months ago by Devin Walker.
    Thread Starter metallikat36

    (@metallikat36)

    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 3 years, 5 months ago by metallikat36.
    Plugin Author Devin Walker

    (@dlocc)

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

    Thread Starter metallikat36

    (@metallikat36)

    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 3 years, 5 months ago by metallikat36.
    Plugin Author Devin Walker

    (@dlocc)

    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://wordpress.org/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.

    Thread Starter metallikat36

    (@metallikat36)

    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 3 years, 5 months ago by metallikat36.
    Plugin Author Devin Walker

    (@dlocc)

    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.

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    @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.

    Thread Starter metallikat36

    (@metallikat36)

    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 3 years, 5 months ago by metallikat36.
    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    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!

    Thread Starter metallikat36

    (@metallikat36)

    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 3 years, 5 months ago by metallikat36.
    • This reply was modified 3 years, 5 months ago by metallikat36.
    • This reply was modified 3 years, 5 months ago by metallikat36.
    • This reply was modified 3 years, 5 months ago by metallikat36.
    • This reply was modified 3 years, 5 months ago by metallikat36.
    • This reply was modified 3 years, 5 months ago by metallikat36.
    Plugin Author Matt Cromwell

    (@webdevmattcrom)

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

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    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!

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    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!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Floating labels not working’ is closed to new replies.