Blueprint: [Dialog] Unable to click scrollbar associated with long dialogs

[olivergeorge]

Bug report

• __Package version(s)__: 1.15.0
• __Browser and OS versions__: Chrome

Steps to reproduce

1. Go to the Blueprint Documentation for Dialogs
2. Use the embedded example to display a dialog
3. Use dev tools to make the dialog body really long (a scrollbar appears)
4. Try and use the scrollbar

(repeat, this time with "click outside to close" disabled)

Actual behavior

Unable to use scrollbar to see rest of dialog

Expected behavior

Scrollbar works

Analysis

This appears to be caused by the pt-overlay-backdrop covering the pt-overlay-scroll-container.

[giladgray]

still a thing

[TeaBough]

I've managed to make it work using by setting a display: none on .pt-overlay-backdrop and setting a gray background on .pt-overlay-open with gives me :

.pt-overlay-backdrop {
  display: none;
}
.pt-overlay-open {
  background-color: rgba(16, 22, 26, 0.7);
}

HTH

I guess it could be changed on blueprint's project as well...

[jaamison]

Correct me if I'm wrong, but I think this is still still a thing. This recently came up in a rather odd (but perfectly valid) use case where some of our users were required to use ruggedized mechanical trackballs with no scroll wheels (environmental constraint).

Not only is the scrollbar covered and unable to be clicked, but if canOutsideClickClose={true} is set, then clicking the scrollbar (a natural inclination for users when a scrollbar is visible) closes the Overlay, which is almost certainly never the desired behavior.

I understand the motivation for position:fixed on the backdrop (https://github.com/palantir/blueprint/issues/183), and there's no question position:fixed solves a dozen other problems that are much more important than this, but I can't see a way to not cover the container's scrollbar without resorting to width:100% (yuck...) or artificial padding (shudder...).

[jaamison]

I found a possible fix that's pretty simple and non-breaking. Seems to work ok on latest stable chrome/ff/safari on osx, but feedback on compatibility would be great.

By positioning the backdrop element as sticky instead of fixed, we put it back into the document flow (which means any percentage-based dimensions will be relative to the inner content box of the parent - which does not include any browser-introduced scrollbars), yet we still get the benefits of sticky behavior in that its edges will stay tethered to the sides of the viewport.

Bonus: Since the backdrop is now within the flow of the scroll container, any scrolling that happens while the cursor is over the backdrop will still scroll the overlay content (desirable behavior IMO). Previously the cursor had to be over the overlay content itself in order to scroll.

[adidahiya]

@jaamison unfortunately that won't work for us because Blueprint needs to support IE11, which doesn't support position: sticky

[jaamison]

@adidahiya Ah, gotcha. Good to know about the IE11 requirement.

[wcyoyo44]

I've managed to make it work using by setting a display: none on .pt-overlay-backdrop and setting a gray background on .pt-overlay-open with gives me :

.pt-overlay-backdrop {
  display: none;
}
.pt-overlay-open {
  background-color: rgba(16, 22, 26, 0.7);
}

HTH

I guess it could be changed on blueprint's project as well...

This unfortunately doesn't work if you want canOutsideClickClose={true}