Nebular: Can't scroll the dialog content if it's taller than the viewport.

[danyhoron]

Issue type

I'm submitting a ...

• [x] bug report
• [ ] feature request

Issue description

Current behavior:
I cannot scroll through the content of a dialog that is taller than the viewport.

Expected behavior:
I should be able to scroll through the content of a dialog if it's taller than the viewport.

Steps to reproduce:

• Navigate to: https://akveo.github.io/nebular/example/dialog/dialog-scroll.component
• open dev tools, and make it big enough so the page's viewport height is about 300px.
• Hit any of the buttons to open the dialog.
• Try to scroll the dialog's content

Other information:

npm, node, OS, Browser

Node: `v11.1.0`
npm: `6.4.1`
OS: macOS (Mojave)
Browser: Chrome

[Tibing]

Hi @danyhoron, It's not a bug but the desired behavior. I think that dialogs shouldn't be so tall to have to scroll them. Moreover, If you want to put a big amount of data inside the dialog you may fix its height and make its content scrollable with css overflow property.

As I see, you have another point of view. So, please, explain it slightly deeper.

[nnixaa]

I guess we can leave it as an enhancement, as for now, it is possible to set a fixed height of the modal using css.

[gaspardip]

I have a dialog that is taller than the viewport, how can I make it display the whole content?, any guidance would be really helpful, even if its kind of a hack.

[developcodeza-matthew]

Thanks @nnixaa. Ill try mine with a fixed height.

@Tibing I do understand that as far as possible keep dialogs to a minimal size but especially on mobile landscape it will reasonably often grow longer than the screen.

Thanks for the awesome work guys and keep it up!

[developcodeza-matthew]

For anyone looking for a solution - adding max-width: 95vw and max-height: 95vh to the element at the root of the dialog keeps the dialog within the bounds of the screen and any overflow is then scrollable.

[TomasTopinka]

Is scroll for dialog supported in V4.X ?

[jgerstbe]

I too would prefer the whole modal/dialog to be scrollable. I use it to edit complex formdata without leaving the main component (multipage table).

I was able to get it to scroll via

nb-dialog-container {
  overflow: hidden scroll;
  margin-right: -5px;
}

but on small dialoges (confirm) it still displayed presumably an emtpy scrollbar?
Guess I will use provided fix using 95vh for now.

Maybe it could be added as an option to scoll the whole dialog via api configuration.

[AlexTasev]

I had a similar problem- on all app pages the scrolling stops working after a modal/dialog window (any kind) has been opened.

https://www.screencast.com/t/ZMpNAGgDWC

The solution I found is to overwrite the CSS (with Sass) the following way:

nb-layout { .scrollable-container { overflow-y: scroll !important; } }