Bug on selecting an item using <nb-select> (page moves up) #2076

diegoep · 2019-04-04T16:54:20Z

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

The text was updated successfully, but these errors were encountered:

modiboa · 2019-04-17T10:29:36Z

I have the same issue with version 3.4.2

ezequiel88 · 2019-05-18T00:50:57Z

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

blankstar85 · 2019-05-18T01:10:52Z

I have the same issue

anniv · 2019-06-13T10:14:50Z

I have this issue too.

cardioprint · 2019-06-14T16:10:59Z

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 😍

FernandoI7 · 2019-06-19T18:49:18Z

I have the same problem. Was the project abandoned?

skumlk · 2019-06-20T10:11:20Z

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

emko · 2019-06-24T06:01:05Z

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 · 2019-06-24T06:13:25Z

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 😍

almgwary · 2019-06-24T22:31:16Z

any updates, we have same issue

ngocsangyem · 2019-08-28T07:18:59Z

Still, have this issue in nebula 3.5.0

Labratorite · 2020-02-07T09:12:56Z

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.

jagabs · 2020-02-13T14:29:09Z

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

zoo-topia · 2020-05-14T00:24:47Z

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

Any update?

vamidi · 2020-05-17T14:02:10Z

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

#5685

LuckyGStar · 2020-05-18T01:18:40Z

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

vamidi · 2020-05-18T07:39:43Z

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>

zoo-topia · 2020-05-18T07:41:18Z

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

vamidi · 2020-05-18T07:42:43Z

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.

hamzadiaz · 2020-12-02T18:39:20Z

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

mmeguizo · 2022-11-22T17:05:57Z

::ng-deep .cdk-overlay-container {
z-index: 9999999 !important
}

added this on my add user modal, nb select options works like charm..

Angular CLI: 13.3.1
Node: 16.15.1
Package Manager: npm 8.11.0

Angular: 12
...

Package Version

@angular-devkit/architect 0.1303.1 (cli-only)
@angular-devkit/core 13.3.1 (cli-only)
@angular-devkit/schematics 13.3.1 (cli-only)
@schematics/angular 13.3.1 (cli-only)
rxjs 7.5.7

diegoep changed the title ~~Bug on selecting a item using <nb-select> (cdk-global-scrollblock moves up)~~ Bug on selecting an item using <nb-select> (cdk-global-scrollblock moves up) Apr 4, 2019

diegoep changed the title ~~Bug on selecting an item using <nb-select> (cdk-global-scrollblock moves up)~~ Bug on selecting an item using <nb-select> (page moves up) Apr 4, 2019

nnixaa mentioned this issue Jun 24, 2019

feat: update to Angular 8, Nebular 4 #2114

Merged

2 tasks

yggg closed this as completed in #2114 Jul 2, 2019

vamidi mentioned this issue Dec 2, 2020

Weird content shifting behind Dialog when using DialogService with NbSelectComponents #5685

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug on selecting an item using <nb-select> (page moves up) #2076

Bug on selecting an item using <nb-select> (page moves up) #2076

diegoep commented Apr 4, 2019

modiboa commented Apr 17, 2019

ezequiel88 commented May 18, 2019

blankstar85 commented May 18, 2019

anniv commented Jun 13, 2019

cardioprint commented Jun 14, 2019 •

edited

Loading

FernandoI7 commented Jun 19, 2019

skumlk commented Jun 20, 2019

emko commented Jun 24, 2019

emko commented Jun 24, 2019

almgwary commented Jun 24, 2019

ngocsangyem commented Aug 28, 2019

Labratorite commented Feb 7, 2020 •

edited

Loading

jagabs commented Feb 13, 2020 •

edited

Loading

zoo-topia commented May 14, 2020

vamidi commented May 17, 2020 •

edited

Loading

LuckyGStar commented May 18, 2020

vamidi commented May 18, 2020

zoo-topia commented May 18, 2020

vamidi commented May 18, 2020 •

edited

Loading

hamzadiaz commented Dec 2, 2020

mmeguizo commented Nov 22, 2022

Bug on selecting an item using <nb-select> (page moves up) #2076

Bug on selecting an item using <nb-select> (page moves up) #2076

Comments

diegoep commented Apr 4, 2019

modiboa commented Apr 17, 2019

ezequiel88 commented May 18, 2019

blankstar85 commented May 18, 2019

anniv commented Jun 13, 2019

cardioprint commented Jun 14, 2019 • edited Loading

FernandoI7 commented Jun 19, 2019

skumlk commented Jun 20, 2019

emko commented Jun 24, 2019

emko commented Jun 24, 2019

almgwary commented Jun 24, 2019

ngocsangyem commented Aug 28, 2019

Labratorite commented Feb 7, 2020 • edited Loading

jagabs commented Feb 13, 2020 • edited Loading

zoo-topia commented May 14, 2020

vamidi commented May 17, 2020 • edited Loading

LuckyGStar commented May 18, 2020

vamidi commented May 18, 2020

zoo-topia commented May 18, 2020

vamidi commented May 18, 2020 • edited Loading

hamzadiaz commented Dec 2, 2020

mmeguizo commented Nov 22, 2022

Package Version

cardioprint commented Jun 14, 2019 •

edited

Loading

Labratorite commented Feb 7, 2020 •

edited

Loading

jagabs commented Feb 13, 2020 •

edited

Loading

vamidi commented May 17, 2020 •

edited

Loading

vamidi commented May 18, 2020 •

edited

Loading