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: make resize handle not overlap with column sorter #7718

Merged
merged 2 commits into from
Aug 30, 2024

Conversation

DiegoCardoso
Copy link
Contributor

Description

Decrease the resize handle area to use --lumo-size-s to avoid overlapping with the column sorter when the column width is reduced. It also uses the resize handle width to calculate the amount of translation in the X-axis to make it better center-aligned.

Before

image

After

image


To test it locally, the grid.html file can be modified to add/change the columns to something like:

    <vaadin-grid-sort-column path="name" width="200px" resizable header="Long header"
      flex-shrink="0"></vaadin-grid-sort-column>
    <vaadin-grid-sort-column path="name" width="200px" resizable flex-shrink="0"></vaadin-grid-sort-column>

2Then, shrink one of the columns so it starts truncating the header title and see if the sorter can be hovered/clicked as expected.

Fixes #5637

Type of change

  • Bugfix
  • Feature

Decrease the resize handle area to use `--lumo-size-s` to avoid any
overlapping with the column sorter when the column width is reduced.
Also uses the resize handle width to calculate the amount of translation
in the X axis to make it better center aligned.

Fixes #5637
Copy link

sonarcloud bot commented Aug 29, 2024

@DiegoCardoso DiegoCardoso merged commit ac97ad6 into main Aug 30, 2024
9 checks passed
@DiegoCardoso DiegoCardoso deleted the fix/grid/resize-handle-size branch August 30, 2024 07:24
vaadin-bot pushed a commit that referenced this pull request Aug 30, 2024
* fix: make resize handle not overlap with column sorter

Decrease the resize handle area to use `--lumo-size-s` to avoid any
overlapping with the column sorter when the column width is reduced.
Also uses the resize handle width to calculate the amount of translation
in the X axis to make it better center aligned.

Fixes #5637
DiegoCardoso added a commit that referenced this pull request Aug 30, 2024
…4.4) (#7720)

* fix: make resize handle not overlap with column sorter

Decrease the resize handle area to use `--lumo-size-s` to avoid any
overlapping with the column sorter when the column width is reduced.
Also uses the resize handle width to calculate the amount of translation
in the X axis to make it better center aligned.

Fixes #5637

Co-authored-by: Diego Cardoso <diego@vaadin.com>
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.5.0.alpha13 and is also targeting the upcoming stable 24.5.0 version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Grid resize handle overlaps column sorter
3 participants