Spinner has higher z-index than sidebar when on mobile

jasperA256 commented 5 years ago

Issue type

I'm submitting a ...

[x] bug report
[ ] feature request

Issue description

Situation: a responsive nb-sidebar, fixed nb-header and an nb-card with spinner inside the nb-layout-column, on a small (mobile) screen: StackBlitz Example

Current behavior:

When the nb-card shows the nb-spinner its z-index is higher than the sidebar/header, and showing on top of the sidebar/header, thus rendering items visually grayed out and functionally inaccessible to the user.

Expected behavior:

The nb-spinner has a lower z-index than sidebar and header in this situation, so the sidebar and header stay on top and accessible to the user.

Other information:

Angular, Nebular, npm, node, OS, Browser

<!--
Angular: 8.2.8
Nebular: 4.3.1
Node, npm: v10.15.3 and 6.4.1
OS: macOS Mojave version 10.14.6 (18G95)
Browser: Chrome Version 77.0.3865.90 (Official Build) (64-bit)
-->

*Amazing project, just started dabbling around in it a few months ago. Once I get more into it, I'll look into contributing.

jasperA256 commented 5 years ago

For my project a workaround of forcing the z-index of the nb-spinner to 998 in my global styles.scss file is sufficient:

nb-spinner {
  z-index: 998 !important;
}

This is because I have no need for spinners in the sidebar/header/footer/dialogs/... Also loading times are usually pretty small, so there's not that much of a chance of having the conflict. I don't think it's a viable solution for every project though.

GreedyA1 commented 3 years ago

same issue.

khashashin commented 3 years ago

same here:

https://chechen-dictionary.com/pages/home

akveo / nebular