Bug on layout when Dialog is open

[nckenn]

i dont know if this is a bug or not, currently clone the master branch, and when i try to open dialog this happen, but on your demo its seems ok, but on my local its not. hope someone can help me :) thanks

[nnixaa]

Hi @nckenn, please post your browser and OS with versions.

[blankstar85]

I have the same issue, I was thinking it was something I did. Windows 10 and latest chrome

[aefox]

I did some extra investigations. I found a way to reproduce this issue:

• navigate to the ngx-admin
• open developer tools
• move developer tools at the bottom of the window
• focus on the html tag in the explorer tab
• increase the developer tools height until the height of the html becomes smaller than 647px
• scroll at the bottom of the window
• open any dialog

Screenshot with the style on the html when the scroll of the page is at the top:

Screenshot with the style on the html when the scroll of the page is at the bottom:

I don't know where this could come from. If anyone has any idea I could do a PR.

[nckenn]

for now i added this class in my styles.scss to make it work properly :
.cdk-global-scrollblock { position: initial; width: initial; overflow: hidden; }

[aefox]

This seems to be coming from angular/components#7512 and angular/components#7390.

I started from @nckenn 's reply above and isolated the change to be:

.cdk-global-scrollblock {
  position: initial;
  overflow-y: hidden;
}

I have tested this fix on Edge, FF and Chrome and it works as expected (on both ltr and rtl). I wasn't able to test on IE11 because dev tools does not show me the styles for the html element (really weird).

@nnixaa @yggg what do you guys think? Should we do this override? If yes, where should this be best placed?

[nnixaa]

@aefox I guess we should try and check it doesn't introduce any performance drawbacks. I believe https://github.com/akveo/nebular/blob/master/src/framework/theme/components/cdk/overlay/_overlay.theme.scss would be a good place since we already overwriting some styles there.

[akvaliya]

What is the status on this issue? It adds top & left to html which creates issue.

[nbomberger]

For anyone that is still on 3.5. This still works. Simply add this line to your index.html.

<style>.cdk-global-scrollblock { position: initial; width: initial; overflow: hidden; }</style>

[sharankasandula]

For anyone that is still on 3.5. This still works. Simply add this line to your index.html.

<style>.cdk-global-scrollblock { position: initial; width: initial; overflow: hidden; }</style>

For me, overflow: hidden did not work but overflow: initial worked.

[akvaliya]

For me <style>html { overflow: hidden; }</style> worked. Because cdk-global-scrollblock will be added runtime & before that scrollbar in html is generated.

[chuck0523]

This happened to me too

This wasn't enough for me.

.cdk-global-scrollblock {
  position: initial;
  overflow-y: hidden;
}

Combination with html style worked.

html {
  position: fixed;
  top: 0;
}

.cdk-global-scrollblock {
  position: initial;
  overflow-y: hidden;
}