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.

Modal with a single child has padding that causes scrolling issue

See original GitHub issue

Sandbox here: https://codesandbox.io/s/webpack-starter-c9g77

I have a modal with a single span element inside. For some reason, I’m able to scroll down to the point where the element disappears if there is only one line of text.

Start: Screen Shot 2020-02-03 at 4 41 17 PM

After scrolling: Screen Shot 2020-02-03 at 4 41 21 PM

I believe it’s because of this styling:

.bx--modal-content>*:last-child {
    padding-bottom: 2rem;
}

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

abbeyhrtcommented, Feb 4, 2020

The padding-bottom from the last-of-child is separate from what’s keeping the content far enough from the buttons. I added the padding to the last child so that the overflow-indicator doesn’t overlap the text at the end of the scrolling content when hasScrollingContent is set to true. Since it’s causing problems when the overflow indicator isn’t there, I believe I can just change it to not show up if hasScrollingContent is false.

0reactions

abvtecommented, Feb 4, 2020

The padding-bottom is causing the text to overflow, then causing the scrollbar to appear.