Opening NbSelect hides nb-layout-header

[theroozbeh]

Issue type

I'm submitting a

• 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.

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 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 take a look at this StackBlitz code, keep in mind that you have to scroll first then open nb-select to see this behavior.
StackBlitz nb-select-issue Project

[maihannijat]

I also confirm the bug - It is happening to my project as well.

[dizco]

I'm not sure exactly why this bug is happening, but I notice that it's related to the fact that a style is added to the html tag with a top value in the negatives. The more you scroll down before opening the nb-select, the lower the top value is.

I tried to reproduce the issue in the official documentation examples and was unable to. Don't know what the difference is...

Anyone have an idea how we could fix this annoying bug?

[ghost]

I've got very similar issue. When the select is expanded my layout gets messed up. The following 4 pictures show:

1. Page not scrolled and City select not expanded.
2. Page not scrolled and City select expanded. Note the scroll bar that appears on the right.
3. Page was scrolled down in order to choose the brand.
4. Brand select expanded. Note that the header has disappeared and the blank, white space has appeared at the bottom.

Pic. 1.

Pic. 2.

Pic. 3.

Pic. 4

This is my template:

<nb-layout [center]="layout.id === 'center-column'" windowMode>
      <nb-layout-header fixed>
        <ngx-header [subtitle]="subtitle" [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
      </nb-layout-header>

      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive [end]="sidebar.id === 'end'">
        <nb-sidebar-header>
          <button routerLink="/dashboard" class="btn btn-hero-warning main-btn">
            <i class="fa fa-dashboard"></i> <span>Menu</span>
          </button>
        </nb-sidebar-header>
        <ng-content select="nb-menu"></ng-content>
      </nb-sidebar>

      <nb-layout-column class="main-content">
        <ng-content select="router-outlet"></ng-content>
      </nb-layout-column>
</nb-layout>

P.S. What's interesting, this does happen also on ngx-admin (http://akveo.com/ngx-admin/pages/extra-components/form-inputs) when cloned and run locally. However, on http://akveo.com/ngx-admin/pages/extra-components/form-inputs it does not happen.

Locally:

On http://akveo.com/ngx-admin/pages/extra-components/form-inputs