Skip to content

Commit cfa6155

Browse files
nnaydenownnaydenow
authored
fix(ui5-table-cell): truncate overflowing cell content (#13566)
Wrap slot content in a block container with overflow hidden and constrain slotted elements to 100% width, so text truncation via ui5-text max-lines or CSS ellipsis works correctly within table cells. Fixes: #10721
1 parent 6de9bb0 commit cfa6155

3 files changed

Lines changed: 100 additions & 2 deletions

File tree

‎packages/compat/src/TableCellTemplate.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export default function TableCellTemplate(this: TableCell) {
77
part="cell"
88
role="cell"
99
>
10-
<slot></slot>
10+
<div class="ui5-table-cell-content">
11+
<slot></slot>
12+
</div>
1113
</td>
1214
);
1315
}

‎packages/compat/src/themes/TableCell.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,26 @@
55
height: var(--ui5_table_row_height);
66
box-sizing: border-box;
77
color: var(--sapList_TextColor);
8-
word-break: break-word;
98
vertical-align: middle;
9+
overflow: hidden;
10+
max-width: 0;
1011
}
1112

1213
td {
1314
display: contents;
1415
}
1516

17+
.ui5-table-cell-content {
18+
display: block;
19+
width: 100%;
20+
overflow: hidden;
21+
}
22+
23+
::slotted(*) {
24+
max-width: 100%;
25+
width: 100%;
26+
}
27+
1628
:host([popined]) {
1729
padding-left: 0;
1830
padding-top: .25rem;

‎packages/compat/test/pages/TableTextTruncation.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Web components Table</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8+
<script data-ui5-config type="application/json">
9+
{
10+
"language": "EN"
11+
}
12+
</script>
13+
14+
<script>
15+
// delete Document.prototype.adoptedStyleSheets
16+
</script>
17+
18+
19+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
20+
</head>
21+
22+
<link rel="stylesheet" type="text/css" href="./styles/Table.css">
23+
24+
<body class="table1auto">
25+
<ui5-table style="width: 600px;">
26+
27+
<ui5-table-column slot="columns" style="width: 200px">
28+
<ui5-text max-lines="2">Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
29+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
30+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15</ui5-text>
31+
</ui5-table-column>
32+
<ui5-table-column slot="columns">
33+
<ui5-text max-lines="3">Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
34+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
35+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15</ui5-text>
36+
</ui5-table-column>
37+
<ui5-table-column slot="columns">
38+
<ui5-text max-lines="1">Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
39+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
40+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15</ui5-text>
41+
</ui5-table-column>
42+
<ui5-table-column slot="columns">
43+
<span
44+
style="white-space: nowrap; display: inline-block; text-overflow: ellipsis; overflow: hidden; width: 100%;">Notebook
45+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
46+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
47+
Basic 15Notebook Basic 15</span>
48+
</ui5-table-column>
49+
<ui5-table-column slot="columns">
50+
<ui5-text>Price</ui5-text>
51+
</ui5-table-column>
52+
53+
<ui5-table-row>
54+
<ui5-table-cell>
55+
<ui5-text max-lines="2">Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
56+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
57+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15</ui5-text>
58+
</ui5-table-cell>
59+
<ui5-table-cell>
60+
<ui5-text max-lines="3">Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
61+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
62+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15</ui5-text>
63+
</ui5-table-cell>
64+
<ui5-table-cell>
65+
<ui5-text max-lines="1">Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
66+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
67+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15</ui5-text>
68+
69+
</ui5-table-cell>
70+
<ui5-table-cell>
71+
<span
72+
style="white-space: nowrap; display: inline-block; text-overflow: ellipsis; overflow: hidden; width: 100%;">Notebook
73+
Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic
74+
15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook Basic 15Notebook
75+
Basic 15Notebook Basic 15</span>
76+
</ui5-table-cell>
77+
<ui5-table-cell>
78+
<ui5-text>956</b>EUR</ui5-text>
79+
</ui5-table-cell>
80+
</ui5-table-row>
81+
</ui5-table>
82+
</body>
83+
84+
</html>

0 commit comments

Comments
 (0)