Nebular: Opening NbSelect distorts page layout

Created on 29 Apr 2019 · 16Comments · Source: akveo/nebular

Issue type

I'm submitting a ... (check one with "x")

[X] bug report
[ ] feature request

Issue description

Current behavior:
If you have nb-layout-header on a page and nb-select inside nb-layout-column and if page's height is bigger than your screen and you open the nb-select after scrolling, the nb-layout-header would disappear.
(NOTE:) - the parent component nb-layout has no input properties.

Expected behavior:
nb-layout-header shouldn't move or disappear after scrolling the page and opening the nb-select

Steps to reproduce:
create nb-layout then inside it one nb-layout-header and one nb-layout-column. Then put a div Inside nb-layout-column with a height bigger than the screen, so you can to scroll it then put a nb-select inside this div in a position that you have to scroll in order to get to it, then open then nb-select to see the issue.

Related code:
Please refer to this closed issue - #1158

Angular, Nebular

Angular - 7.3.7
Nebular - 3.5.0

bug components

Source

kesdeband

👍3

Most helpful comment

negative top margin is added to the html element when select component is clicked. I added the following now to have quick fix:
html {top: 0 !important;}

maihannijat on 14 May 2019

🎉2 👍1

All 16 comments

The bug made the NbSelect component unusable. The closed referenced issue does not solve the bug.

Looking forward for workaround
Thanks

maihannijat on 2 May 2019

Yep, this issue is still happening, in the official demo and in my app. NbSelect is breaking the layout. When a nb select is opened with the window scrolled down, the html element style attribute is changed applying negative top css property to it. This pushes the header too, and in my app, the nb-menu element.

bruno-lombardi on 5 May 2019

For now, I fixed it with:

/deep/ nb-layout.with-scroll .scrollable-container {
  height: auto !important;
}

maihannijat on 7 May 2019

👍1

negative top margin is added to the html element when select component is clicked. I added the following now to have quick fix:
html {top: 0 !important;}

maihannijat on 14 May 2019

🎉2 👍1

Same issue here... @maihannijat 's solution doesn't seem to work for me... Where do you add the html style?

Meowzz95 on 11 Jun 2019

Ran into the issue today, fixed with @maihannijat first fix, but using ::ng-deep instead of /deep/:

::ng-deep nb-layout.with-scroll .scrollable-container {
    height: auto !important;
}

Although that may break other scrollings, not a perfect fix.

SnakyBeaky on 11 Jun 2019

@Meowzz95 I add the following in the index.html:

<head>
      <style>html {top: 0 !important;}</style>
</head>

maihannijat on 11 Jun 2019

👍1

Any other solutions for this one that DOESN'T break scrolling??

kevinjamesbaker on 12 Jun 2019

For now, I don't use selects from nebular, just the common bootstrap .custom-select. For my application, it doesn't matter so much, but it would be nice for it to work properply. But, it seems like Nebular had an update, as the look of the selects have changed, maybe this issue was fixed??

bruno-lombardi on 12 Jun 2019

The issue with header should be fixed by #1604. Also, a similar issue was fixed in the sidebar by #1607. We're planning to release minor updates with this fixes tomorrow (for both latest 4.0 and LTS 3.6 versions).

Before the release, you could apply change manually to verify fix does work.

To fix header:

Remove all workarounds proposed above.
Add the next lines to the global styles or component containing nb-layout-header.

nb-layout-header.fixed {
  top: 0;
}

To fix sidebar:

Remove all workarounds proposed above.
If you use custom theming add next lines in the component containing nb-sidebar:
nb-sidebar ::ng-deep .main-container-fixed { top: nb-theme(header-height); }
or if case you use prebuilt css add following lines in global styles:
nb-sidebar .main-container-fixed { top: 4.75rem; }

Please, let us know here if fixes don't work for you.