Social Button Jumping? Initially Hidden

  • Resolved aaron13223

    (@aaron13223)


    1 year, 1 month ago

    When the social login is enabled on primary wp-admin login form, it seems to jump….

    I think it’s set to display:none initially so I added a css style display: flex !important: which only partly fixed the problem.

    Now the button “jumps”. It first shows up above both the “Login Button” and “Remember Me” and then it jumps back down to it’s original position.

    Is it possible to make the button appear right from the beginning and in the right place? Thanks a lot for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Laszlo

    (@laszloszalvak)

    1 year, 1 month ago

    Hi @aaron13223

    The free version of Nextend Social Login doesn’t have any layout specific settings that could make the buttons jump to places, thus the buttons are displayed in their original position from the beginning without them being hidden.

    Is it possible that you are using Nextend Social Login Pro Addon? If you do, then please note that, this forum is only for the Free version and as per the forum guidelines:

    topics about commercial products – such as the Pro Addon – can not be discussed here. So if you are a Pro Addon customer, then please:

    1. contact us directly at: https://nextendweb.com/contact-us/nextend-social-login-support/
    2. send us the link of your login page
    3. tell us where you want the buttons to show up exactly

    and we will figure it out.

    Best regards,
    Laszlo.

    Thread Starter aaron13223

    (@aaron13223)

    1 year, 1 month ago

    Hi Laszlo,

    Thanks a lot for the quick turnaround. I am using the Free plugin and not the pro version. Could you please take a look at this link?

    If you look closely, you will notice that the Google Login Button has a CLS Issue where it is hidden by default and as soon as the page fully loads, it comes into view.

    The Button only looks like it’s “jumping” when I force the button to be displayed from the start using an external stylesheet. Let me know what you think or if you need anything else from me. 

    #nsl-custom-login-form-main .nsl-container{
        display: none;
    }

    The code above seems to be added and the display: block; is set with inline css – maybe that’s why?

    Thanks again!

    • This reply was modified 1 year, 1 month ago by aaron13223.
    Plugin Support Laszlo

    (@laszloszalvak)

    1 year, 1 month ago

    Hi @aaron13223

    Thank you for the link.

    Meanwhile I double checked our code, and as I see our default “Below” layout for the WordPress specific login form also uses JavaScript for the positioning, as:

    • the WordPress login form doesn’t have any action at that position, so normally as you also noticed the button should show up between the “Password” field and the “Submit” button.
    • and when Jetpack overides the WordPress default login form, the social buttons couldn’t appear at all, so in this case we have to position the button relative to another element

    In the case of these JavaScript based layouts, we hide the buttons by default and the JavaScript code makes the show up once the element has been positioned to the correct place.

    If you would like to avoid the layout shift, then you could override the template of our “Below” layout over your theme like this:

    so basically you should override this template:

    • wp-content/plugins/nextend-facebook-connect/template-parts/login/below.php

    via your child theme with an empty PHP file, e.g.:

    • wp-content/themes/twentytwentyone-child/nsl/login/below.php

    as it is suggested in the documentation above and that way the hiding and positioning codes won’t be loaded.

    Sorry for the misunderstanding. Best regards,
    Laszlo.

    Thread Starter aaron13223

    (@aaron13223)

    1 year, 1 month ago

    Hi Laszlo,

    Thanks a lot for the detailed response! I am assuming this doesn’t happen when the buttons are added below the Login Form with the premium version?

    Anyway, I was able to remove the positioning codes by adding [theme]/nsl/login/below.php like you suggested.

    And then I positioned the Social Login Button using position:absolute and added position: relative and some padding to .login form

    This worked well and now there’s no CLS! Thanks a lot for your help!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Social Button Jumping? Initially Hidden’ is closed to new replies.