Skip to content

Commit 61dd937

Browse files
crisbetojelbourn
authored andcommitted
fix(tabs): handle long tab labels in mat-tab-nav-bar (#10903)
Fixes the `mat-tab-link` not handling long text strings.
1 parent 116ee60 commit 61dd937

File tree

1 file changed

+6
-1
lines changed

1 file changed

+6
-1
lines changed

src/lib/tabs/tab-nav-bar/tab-nav-bar.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,16 @@
1414
// Wraps each link in the header
1515
.mat-tab-link {
1616
@include tab-label;
17-
vertical-align: top;
17+
line-height: $mat-tab-bar-height;
1818
text-decoration: none; // Removes anchor underline styling
1919
position: relative;
2020
overflow: hidden; // Keeps the ripple from extending outside the element bounds
2121

22+
// Allows for the ellipsis overflow to work. We truncate the
23+
// text since we don't support pagination on nav bars.
24+
display: block;
25+
text-overflow: ellipsis;
26+
2227
[mat-stretch-tabs] & {
2328
flex-basis: 0;
2429
flex-grow: 1;

0 commit comments

Comments
 (0)