nextend break the layout of buddypress page

Hi @danielmark

I checked the latest Nextend Social Login with the latest BuddyPress and I couldn’t reproduce this problem.
So I think that dark gray area on the right side rather comes from your theme or a third party plugin. Since with the Link/Unlink notification – that appears on your screenshot – is only a position: fixed; div that is added to the top right corner.
So our link/unlink message floats above the same place, but I don’t think Nextend Social Login has any relationship to that gray area, especially because our notifications are appended to the document with JavaScript, so they won’t exist except if a certain condition is met, e.g. you Link / Unlink a provider on that page.
Note: It seems something overrides our font color with a white font color, and that’s why the notification seems empty.

Anyways could you check please if you see this problem occur on the problematic page even if you disable Nextend Social Login in your plugins list? If that gray area appears there that way too then that already confirms that the problem is not connected to Nextend Social Login.

If disabling Nextend Social Login fixes the problem, then please get in touch with us over the ticket system:

• https://nextendweb.com/contact-us/nextend-social-login-support/?ref=https://www.ads-software.com/support/topic/nextend-break-the-layout-of-buddypress-page/

and send us a link to the page where I can check this problem!

Best regards,
Laszlo.

Noted, but it didnt break any page except social account page where link and unlink feature automatically added by plugin, and this social accounts page only exist if this plugin enabled,

View post on imgur.com

What the issue it might be?

Hi @danielmark!

In this case please send us a link of your site, so we could inspect this problem there.
If you don’t want to share the URL of your website here, then please get in touch with us directly over the ticket system:

• https://nextendweb.com/contact-us/nextend-social-login-support/?ref=https://www.ads-software.com/support/topic/nextend-break-the-layout-of-buddypress-page/

and send the URL of your site there.

Hi @danielmark

It seems this problem was caused by a CSS that the theme applies to the element with the class: .social and when you are on the Social Accounts page, your body element also has that class.

In your support ticket I also gave some suggestions for fixing the problem.

I implemented your suggestion, and it is actually work, Thank you, about notification font color got overridden, I think it’s because the dark theme feature (moon icon in the Topbar), the plugin style seem not persistent with dynamic change or perhaps the theme problem again. Since dark theme only overwritten white and black color, Is there a way to change the color of the text? I cant inspect element because how fast is notification hiding

Hi @danielmark

I am glad that worked!

As I see a CSS like this could solve the problem with the dark mode CSS override, too:

div#nsl-notices-fallback p{
  color: #28303d;
}

If that doesn’t work, then probably the CSS selectors your dark mode uses are even stronger, so you could make thus CSS stronger with !important rule:
https://www.w3schools.com/css/css_important.asp

Best regards,
Laszlo.

The social now worked very well, the sum to fix the problem is

body.social{
  display: block;
}

body.social div.top-header{
  width: 100%!important;
}

adding css in child theme style.css work

and for prevent dark theme this css work

#nsl-notices-fallback p{
  color: #28303d !important;
}

Thank a lot for looking this up