Default Theme, CSS Bug - User Profile and Search Menu

[Allegheny]

When viewing anyone's profile, if you click the "search" box the resulting drop down has a z-index issue with the menu's underneath it.  There's bleed through.  This is easily seen here on the Invision Community Forums by viewing anyone's profile and clicking the search box.  However, I have attached an image anyways.

I tried a quick fix in my custom.css file by adding the following:

#elEditProfile {
    z-index: 0;
}

#elProfileStats > [data-role="switchView"] .ipsList_inline, #elProfileStats > [data-role="switchView"] .ipsButton {
    z-index: 0;
}

And, that does work on the full desktop view; however, it makes the menus unusable in the responsive or mobile view.  So... that won't work.

So, I'd thought I'd report this so it can be fixed in a future version.

Until then.. does anyone have any suggestions?

Edited October 22, 2021 by Allegheny
typo

[Allegheny]

Actually, there's another default theme CSS/Z-Index issue with the Calendar and the Search drop down.  This I was able to fix with the following code in my custom.css:

/** Z-Index Problem with Calendar and Search Drop Down */
.ipsPos_sticky, .lg\:ipsPos_sticky {
    z-index: 0;
}

Granted.... that fix might have screwed something else up that I have yet to discover... So, use at your own risk.

But I thought I'd mention it in hopes it will be fixed in future versions.

Since there's no calendar here in the Invision Community, I have attached a pic of what I am seeing on my own site.

Edited October 22, 2021 by Allegheny
Add Pic

[Marc Stridgen]

Thank you for reporting, and I have added this to our internal bug tracker to be resolved

[Allegheny]

Thanks Marc!

[Marc Stridgen]

These should now be resolved. Thanks for letting us know

[Allegheny]

I have installed both v4.6.8 and v4.6.9 updates, cleared cache and any custom css and both problems remain in the default template.

On Invision's own site and only with the profile / search drop down menu, it does seem to be fixed there.  However, I don't think or am guessing that the fix has not been moved over to the actual product for the rest of us to enjoy.  Or, there's a regression in v4.6.9.

Side note for anyone who is using the calendar, the temp. fix I mentioned above does cause other issues with the sticky calendar month name title area and scrolling.  So, you might want to avoid that temp. fix.

So... and as far as I can tell, the search drop down menu is still having issues with the calendar and profile pages.

Edited December 21, 2021 by Allegheny

[Ehren]

4 hours ago, Allegheny said:

I have installed both v4.6.8 and v4.6.9 updates, cleared cache and any custom css and both problems remain in the default template.

I'm unable to reproduce the issue on the default theme on either 4.6.8 or 4.6.9. I tried checking your site, however I'm unable to access it as a guest.

[Allegheny]

Hi Ehren,

Thanks for checking.  I did find the problem in my custom css.  I went back and cleared my custom css again and started adding things back line by line and finally found an incorrect z-index assigned to the ipsLayout_header.  Corrected that and now all is good.  Not sure how I missed that before.

Sorry, for the trouble and thanks for confirming that it was not a return of the original issue.

-Chris

[Ehren]

Nice, glad you got it sorted!

z-index's can be a pain sometimes! 🙂