Skip to content
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

Merged
merged 1 commit into from
Dec 7, 2023
Merged

Conversation

pradeepnschrodinger
Copy link
Collaborator

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 with fixed 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:
Screenshot 2023-12-03 at 2 56 57 AM
Screenshot 2023-12-03 at 2 58 44 AM

After:
Screenshot 2023-12-03 at 2 53 04 AM
Screenshot 2023-12-03 at 2 59 08 AM

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.

/**
* @type {number} Top position of ResizerKnow. It is passed to ResizerLine to render at appropriate position.
*/
top: 0,
Copy link
Collaborator Author

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;
Copy link
Collaborator Author

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.

Comment on lines +163 to +164
FixedDataTableEventHelper.getCoordinatesFromEvent(ev).x -
ev.currentTarget
Copy link
Collaborator Author

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.

@AmanGupta2708
Copy link
Collaborator

LGTM

@pradeepnschrodinger pradeepnschrodinger merged commit 8a70866 into master Dec 7, 2023
6 checks passed
@pradeepnschrodinger pradeepnschrodinger deleted the relative-resizer-line branch December 7, 2023 12:38
@pradeepnschrodinger
Copy link
Collaborator Author

Released with v2.0.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug regression issue that was "fixed" but got reopened later on
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Resize vertical bar public in header_ FixedDataTableColumnResizerLine_ Main positioning is not accurate
3 participants