ngx-admin: Bug on selecting an item using (page moves up)

I’m trying to add a simple dropdown menu with nb-select, e.g.:

<nb-select  formControlName="unit">
    <nb-option value="cm">Centimetre</nb-option>
    <nb-option value="m">Meter</nb-option>
</nb-select> 

But when I select some item, the entire page moves up. Actually, an inline style is applied to the html, changing the “top” position for some negative value.

This problem has begun after I’ve upgraded from nebular 3.0.0 to the last version (3.4.2).

It is possible to reproduce this problem even in the ngx-admin demo page (http://akveo.com/ngx-admin/pages/extra-components/form-inputs).

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 13
  • Comments: 21

Most upvoted comments

i don’t know but for now i am just using

/deep/ .cdk-global-scrollblock { position: static !important; }

in my component that uses the dropdown in, so far i notice nothing breaks 😍

still occurs on “@nebular/theme”: “4.6.0”, but nb-select inside a dialog

I have added .cdk-global-scrollblock { position: static !important; } directly in index.html file.

Finally nb-select in modal works as expected!

Hope this helps anyone with this issue.

Nebular: 4.2.1 Angular: 8.0.0

Let me add some info:

Current behavior: Popup window from <nb-select> or another popup call with Material overlay is causing blank room below the footer. Page should have vertical scroll and popup should be attached to input from second (scrolled down) screen and further. Here is screenshot.

Steps to reproduce:

  1. Go to demo page: http://akveo.com/ngx-admin/pages/extra-components/form-inputs.
  2. Activate some of bottom select-boxes.
  3. See blank stripe at the bottom of the screen.

I guess it’s related to <nb-layout> and cdk-overlay.

P.S. Tons of thanks to you guys for this awesome admin panel 😍

i don’t know but for now i am just using

/deep/ .cdk-global-scrollblock { position: static !important; }

in my component that uses the dropdown in, so far i notice nothing breaks 😍

Thank you so much for this!!

still occurs on “@nebular/theme”: “4.6.0”, but nb-select inside a dialog

Any update?

I can resolve this issue with changed build option.

  • extractCss: from true to false
          "configurations": {
            "production": {
              "extractCss": false,

nebula 4.1.0 angular 8

I hope this helps you.