-
Notifications
You must be signed in to change notification settings - Fork 291
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix resizer line positioning #709
Conversation
/** | ||
* @type {number} Top position of ResizerKnow. It is passed to ResizerLine to render at appropriate position. | ||
*/ | ||
top: 0, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not needed anymore since the vertical offset of the resizer line is positioned relative to the table at 0px.
@@ -26,7 +26,7 @@ | |||
border-right-width: 1px; | |||
box-sizing: border-box; | |||
position: absolute; | |||
z-index: 10; | |||
z-index: 100; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This makes the resizer line go above the scrollbar UI.
FixedDataTableEventHelper.getCoordinatesFromEvent(ev).x - | ||
ev.currentTarget |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This positions it relative to the main table div.
LGTM |
Released with v2.0.4. |
Description
Fixes resizer line's positoning so that it works with cases where the main table is positioned/offset in a modal (see #707).
The main change here is that we no longer render the resizer line at
document.body
withfixed
positioning.Instead, it's portalled to the top-level table element and given a
relative
positioning.This ensures that the resizer line has the same stacking context and positioning relative to the table (behavior in v1.2).
Motivation and Context
Fixes #707
How Has This Been Tested?
Tested with local examples.
Screenshots (if appropriate):
Before:
After:
Types of changes
Checklist: