Fix: sort icons on Table overlapped next columns #3940
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Fixes the issue that sort icons on Table overlapped or were clipped by next columns. Since sort icons were absolutely positioned and placed at the right side of the column label texts, the icons overlapped or were clipped by the right columns when columns were packed. This commit changes the anchor element for sort icons to `<div class="th-wrap">` elements that wrap the column label texts and absolutely places sort icons ON the right end of the `<div class="th-wrap">` elements instead. If the column `is-numeric`, the sort icon is placed on the left end of the `<div class="th-wrap">` element, otherwise the sort icon overlaps the column label text. Similar problems occurred when the `sort-multiple` option was turned on. Applying the above solution to the delete buttons of sort indicators did not work well. The delete buttons were torn apart from the sort icons since the sort icons aligned with the normal flow of the column label texts. I decided to group the sort icon, number, and delete button as `multi-sort-icons` so that they do not split. `multi-sort-icons` is placed in the normal flow of the column label texts and moves to the next line if the column is packed. issues - buefy#2886 - buefy#3034
✅ Deploy Preview for buefy-org ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
kikuomax
changed the title
wesdevpro
approved these changes
Dec 21, 2023
64 tasks
kikuomax
added a commit
to kikuomax/buefy
that referenced
this pull request
Jan 10, 2024
- Fixes the issue that sort icons on Table overlapped or were clipped by next columns. Since sort icons were absolutely positioned and placed at the right side of the column label texts, the icons overlapped or were clipped by the right columns when columns were packed. This commit changes the anchor element for sort icons to `<div class="th-wrap">` elements that wrap the column label texts and absolutely places sort icons ON the right end of the `<div class="th-wrap">` elements instead. If the column `is-numeric`, the sort icon is placed on the left end of the `<div class="th-wrap">` element, otherwise the sort icon overlaps the column label text. Similar problems occurred when the `sort-multiple` option was turned on. Applying the above solution to the delete buttons of sort indicators did not work well. The delete buttons were torn apart from the sort icons since the sort icons aligned with the normal flow of the column label texts. I decided to group the sort icon, number, and delete button as `multi-sort-icons` so that they do not split. `multi-sort-icons` is placed in the normal flow of the column label texts and moves to the next line if the column is packed. issues - buefy#2886 - buefy#3034
kikuomax
added a commit
to kikuomax/buefy
that referenced
this pull request
Feb 11, 2024
- Fixes the issue that sort icons on Table overlapped or were clipped by next columns. Since sort icons were absolutely positioned and placed at the right side of the column label texts, the icons overlapped or were clipped by the right columns when columns were packed. This commit changes the anchor element for sort icons to `<div class="th-wrap">` elements that wrap the column label texts and absolutely places sort icons ON the right end of the `<div class="th-wrap">` elements instead. If the column `is-numeric`, the sort icon is placed on the left end of the `<div class="th-wrap">` element, otherwise the sort icon overlaps the column label text. Similar problems occurred when the `sort-multiple` option was turned on. Applying the above solution to the delete buttons of sort indicators did not work well. The delete buttons were torn apart from the sort icons since the sort icons aligned with the normal flow of the column label texts. I decided to group the sort icon, number, and delete button as `multi-sort-icons` so that they do not split. `multi-sort-icons` is placed in the normal flow of the column label texts and moves to the next line if the column is packed. issues - buefy#2886 - buefy#3034
kikuomax
added a commit
to ntohq/buefy-next
that referenced
this pull request
Feb 12, 2024
- Fixes the issue that sort icons on Table overlapped or were clipped by next columns. Since sort icons were absolutely positioned and placed at the right side of the column label texts, the icons overlapped or were clipped by the right columns when columns were packed. This commit changes the anchor element for sort icons to `<div class="th-wrap">` elements that wrap the column label texts and absolutely places sort icons ON the right end of the `<div class="th-wrap">` elements instead. If the column `is-numeric`, the sort icon is placed on the left end of the `<div class="th-wrap">` element, otherwise the sort icon overlaps the column label text. Similar problems occurred when the `sort-multiple` option was turned on. Applying the above solution to the delete buttons of sort indicators did not work well. The delete buttons were torn apart from the sort icons since the sort icons aligned with the normal flow of the column label texts. I decided to group the sort icon, number, and delete button as `multi-sort-icons` so that they do not split. `multi-sort-icons` is placed in the normal flow of the column label texts and moves to the next line if the column is packed. issues - buefy#2886 - buefy#3034
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes
Proposed Changes
is-numericistrue, otherwise on the right.sort-multiplemode, group the sort icon, number, and delete button asmulti-sort-iconsso that they won't splitmulti-sort-iconsgroups are placed on the left ifis-numericistrue, otherwise on the right.