Tables: column sort icon overlaps into next column #3034
Assignees
Labels
Comments
|
I want to refactor table header classes, there is something weird |
|
This seems to be related to: |
kikuomax
added a commit
to kikuomax/buefy
that referenced
this issue
Dec 19, 2023
- 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
wesdevpro
pushed a commit
that referenced
this issue
Dec 21, 2023
- 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 - #2886 - #3034
kikuomax
added a commit
to kikuomax/buefy
that referenced
this issue
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 issue
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 issue
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
Overview of the problem
Buefy version: [0.9.4]
Vuejs version: [2.6.12]
OS/Browser: Ubuntu/Chrome
Description
For tables with sortable columns, sometimes the sort arrow overlaps into the next column label. This is because the column width doesn't take into account the width of the sort icon. This happens with tables with lots of columns, and is worse on screen sizes up to desktop (particularly between mobile and desktop sizes). This only affects columns where the label is the same width or wider than the data itself (i.e. not columns where the data takes up significantly more space than the label, as here the icon displays within the width of the column).
Steps to reproduce
Expected behaviour
The width of the column you are sorting by should also include the width of the sort icon.
Actual behaviour
The column width is calculated from the label and data alone, meaning the sort icon overlaps into the next column.
The text was updated successfully, but these errors were encountered: