Unable to scroll container after click Nb-Select Component

[evilkent911]

Issue type I'm submitting a

[X]bug report feature request

Issue description nb-layout will auto add style : overflow-y : hidden after click the nb-select component and not able to scroll after it

@nebular/theme 4.2.1

[DiegoPatrocinio]

I just commented on #1929 but it seems to be the same cause:

After messing around for a while I managed to fix the issue on my app by removing WindowModeBlockScrollService from my theme.module.ts file and then removing it's usage in the one-column.layout.ts.

So far I didn't notice any side effects caused by these chances, but something may show up later and require further changes.

I hope it helps you!

I also noticed that it's not only the NbSelect Component, the same happens if you open a NbDialog and then close it!

[evilkent911]

it working. thank you

[agtzdimi]

Hello,

Actually the problematic line is this.content.style.position = 'fixed';

If you comment out this line instead of the whole service you will have the same outcome. The only problem I can see is that by not having a fixed position or absolute you can scroll the nb-select options around the layout like the below picture.

[agtzdimi]

A solution for the above problem is to add another style for the overflow-y to show the scroll bar and disable scrolling.

In our case, I used the position: fixed and applied also overflow-y: scroll

So in window-mode-block-scroll.service.ts I have:

    this.container.style.overflowY = 'scroll';
    this.content.style.overflowX = 'hidden';
    this.content.style.overflowY = 'scroll';
    this.content.style.position = 'fixed';

[ArtemRomanovsky]

hi @evilkent911! We intentionally block the scroll when select is open. Could you describe the use case when you need to scroll page with select being opened?

[evilkent911]

hi @evilkent911! We intentionally block the scroll when select is open. Could you describe the use case when you need to scroll page with select being opened?

Hi @ArtemRomanovsky Actually is after select an item or hide the select option. The overflow-y:hidden still exists at the page CSS. It cause not able to scroll the page.

[ArtemRomanovsky]

hi @evilkent911! Thank you for your feedback. We've just checked your issue again, could you please create a reproducible example on https://stackblitz.com/github/akveo/nebular-seed to illustrate the issue?

[amirhosein993]

I have the same issue when using nb-select in nb-dialog container. the main page scroles when clicking on the select.

[Mautriz]

Having a similar issue, my page scrolls back to the top whenever I use a select (when I disabled the withScroll option on the layout, when it is enabled the select dropdown doesn't move with the page)

[dlarchikov]

Having a similar issue, my page scrolls back to the top whenever I use a select (when I disabled the withScroll option on the layout, when it is enabled the select dropdown doesn't move with the page)

same behaviour :(

[suppadeliux]

Wating for a solution to :eyes: