You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Package version(s): Blueprint 4 (issue exists on 5 as well)
Browser and OS versions: Chrome
Question
We have a case where we need a blueprint slider within a div. This div needs to have the overflow-x: hidden property.
The min and max values of the slider can be arbitrarily large. The width of the slider, however, needs to remain consistent regardless of the min and max values.
With very large numbers, both the axis labels and the popover containing the value of the slider overflows outside of the div it is in. (In the screenshot the min and max are -1,000,000 and 1,000,000 respectively)
We have a workaround that moves the min and max label to within the bounds of the div, but we are unable to find a solution that works for the popover.
Is there any built-in functionality or workaround that can be suggested to either:
Allow the popover of the slider pop out above the overflowing div
As soon as the popover is about to leave the bounds of the div that it sticks and expands towards the center of the div
I believe a decent solution would be to (optionally?) use a portal for the slider labels, so that it is rendered outside of its container. We would accept a contribution to fix this issue.
Environment
Question
We have a case where we need a blueprint slider within a div. This div needs to have the overflow-x: hidden property.
The min and max values of the slider can be arbitrarily large. The width of the slider, however, needs to remain consistent regardless of the min and max values.
With very large numbers, both the axis labels and the popover containing the value of the slider overflows outside of the div it is in. (In the screenshot the min and max are -1,000,000 and 1,000,000 respectively)
We have a workaround that moves the min and max label to within the bounds of the div, but we are unable to find a solution that works for the popover.
Is there any built-in functionality or workaround that can be suggested to either:
Here is a sandbox to hopefully better illustrate the issue:
https://codesandbox.io/p/sandbox/constrained-blueprint-slider-l42kx6
The text was updated successfully, but these errors were encountered: