Ngx-admin: Bug on selecting an item using <nb-select> (page moves up)

Created on 4 Apr 2019 · 20Comments · Source: akveo/ngx-admin

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

Source

diegoep

👍8 🎉3 👎2

Most helpful comment

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 😍

emko on 24 Jun 2019

❤4 👍4 🎉2 😕1

All 20 comments

I have the same issue with version 3.4.2

thiagofabre on 17 Apr 2019

Estou com o mesmo problema, alguma solução?

ezequiel88 on 18 May 2019

I have the same issue

blankstar85 on 18 May 2019

I have this issue too.

anniv on 13 Jun 2019

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 14 Jun 2019

👀1 👍1

I have the same problem. Was the project abandoned?

FernandoI7 on 19 Jun 2019

I have this issue too. Aren't there any solution for this?

skumlk on 20 Jun 2019

anyone figure it out? its causing a issue with my form inputs as the input is at the bottom of the page when user clicks the drop down button the page turns white

emko on 24 Jun 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 😍

emko on 24 Jun 2019

❤4 👍4 🎉2 😕1

any updates, we have same issue

almgwary on 25 Jun 2019

Still, have this issue in nebula 3.5.0

ngocsangyem on 28 Aug 2019

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 7 Feb 2020

🚀1

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

jagabs on 13 Feb 2020

👍8

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

Any update?

zoo-topia on 14 May 2020

👍1

Same issue with the weird white footer when using a popup with nbselect component is the pull request working for this as well?

[EDIT]

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

--> didn't work for me either inside a popup.

I provided a report as well with screenshots what other people mean with the footer/white artifact

https://github.com/akveo/ngx-admin/issues/5685

vamidi on 17 May 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 18 May 2020

👍4

It still happens to me in Nebular 5.0 angular 9.0.4

my index.html file

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style>
        .cdk-global-scrollblock {
            position: static !important;
        }
    </style>
</head>
<body>
    <ngx-app>Loading...</ngx-app>

    <style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #000000;overflow:hidden}  .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite}  .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%}  .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}  .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style>
    <div id="nb-global-spinner" class="spinner">
        <div class="blob blob-0"></div>
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>
        <div class="blob blob-4"></div>
        <div class="blob blob-5"></div>
    </div>
</body>
</html>

vamidi on 18 May 2020

@vamidi, what is the version of Nebular & Angular you are working on right now?

zoo-topia on 18 May 2020

Nebular 5.0.0 and angular 9.0.4

[EDIT] I checked the css and it wasn't overriding the global-scrollblock , I tested it with the fix and it worked. so now I have find out where to place it properly to let it override the standard css.

vamidi on 18 May 2020

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