Skip to content

Commit

Permalink
fix(table): prevent random large font-sizes in iOS & truncate strings
Browse files Browse the repository at this point in the history
In some scenarios, a table cell could suddenly get a really large
font-size. Seemingly this happened when for contents
with many characters.
However, the issue was not the `font-size` property itself.
It was likely due to some Safari-related bug, which had to do with
`display: inline-flex` of table cells, and or combination of it with
some other styles in Tabulator. Usage of `inline-flex` also
caused text not to be truncated in any cells.
Both problems are fixed now.
  • Loading branch information
Kiarokh committed Jan 10, 2025
1 parent 3df02c0 commit 6b5aa05
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 17 deletions.
27 changes: 13 additions & 14 deletions src/components/table/partial-styles/_row-selection.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,34 @@

// .has-rowselector {} // Mabe useful later

$checkbox-distance-to-left-edge: 0.5rem;

.select-all,
.limel-table--row-selector {
--mdc-checkbox-touch-target-size: 1.125rem; // prevent the checkbox affecting the row height
limel-checkbox {
min-height: 1.125rem;
}
// prevent the checkbox affecting the row height
--mdc-checkbox-touch-target-size: 1.125rem;
--mdc-checkbox-ripple-size: 2.5rem;
}

.select-all {
position: absolute;
z-index: $table--limel-table--row-selector;
left: 0;
left: $checkbox-distance-to-left-edge;
top: functions.pxToRem(6);
width: functions.pxToRem(41); // width of the selector column

display: flex !important;
align-items: center;
justify-content: center;
}

.limel-table--row-selector {
position: sticky !important; // otherwise will be overwritten from `.tabulator-row .tabulator-cell`
left: 0;
border-width: 0;
justify-content: center;
z-index: $table--limel-table--row-selector;
padding-right: 0 !important;
padding-left: 0 !important;

text-overflow: unset !important; // Otherwise a `…` will be rendered besides the checkbox, since we truncate all cells
padding-left: $checkbox-distance-to-left-edge !important;

limel-checkbox {
margin-top: functions.pxToRem(1);
}

.tabulator-row-odd & {
background-image: linear-gradient(
Expand Down Expand Up @@ -66,7 +66,6 @@

limel-checkbox {
transition: opacity 0.2s ease;
align-self: center;
opacity: 0.3;

.tabulator-row:hover & {
Expand Down
3 changes: 0 additions & 3 deletions src/components/table/table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,6 @@ $table--limel-table--row-selector: 1;
padding: $cell-padding;
padding-left: $cell-padding + $width-of-sorter-arrow;

display: inline-flex;
align-items: center;
min-height: inherit;

&[style*='text-align: right;'] {
Expand All @@ -140,7 +138,6 @@ $table--limel-table--row-selector: 1;
.tabulator-col,
.tabulator-cell {
max-width: var(--table-max-column-width, 40rem);
font-size: functions.pxToRem(13);
}

#tabulator-loader,
Expand Down

0 comments on commit 6b5aa05

Please sign in to comment.