Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Issue type

I’m submitting a …

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

Issue Analytics

State:
Created 5 years ago
Reactions:10
Comments:8 (1 by maintainers)

Top GitHub Comments

32reactions

developcodeza-matthewcommented, Jan 15, 2019

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.

7reactions

AlexTasevcommented, Oct 21, 2019

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; } }

Top Results From Across the Web

How to scroll the page when a modal dialog is longer than the ...

Try: .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; }. It will arrange your modal and then give it an vertical scroll.

Jquery Dialog Overlay problem when dialog is bigger than ...

When I use a basic Dialog, set modal to true and the content of the dialog is bigger than my viewport, the overlay...

How to make popup modal scrollable on smaller screens

I have a popup modal that is 800 pixels in height. When I view on mobile I can't scroll to the bottom. Not...

ScrollView - Android Developers

For vertical scrolling, consider NestedScrollView instead of scroll view which ... whether the scrollview should stretch its content to fill the viewport.

Prototype scrolling with overflow behavior - Figma Help Center

To apply overflow behavior, the frame must have content that extends beyond its bounds. If you change the bounds of the frame so...