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 😍

+13

emko on Jun 24, 2019

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

jagabs on Feb 13, 2020

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

LuckyGStar on May 18, 2020

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:

Go to demo page: http://akveo.com/ngx-admin/pages/extra-components/form-inputs.
Activate some of bottom select-boxes.
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 😍

cardioprint on Jun 14, 2019

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!!

hamzadiaz on Dec 2, 2020

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

Any update?

zoo-topia on May 14, 2020

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.

Labratorite on Feb 7, 2020