Skip to content
This repository was archived by the owner on May 20, 2023. It is now read-only.

Commit 49a4b3d

Browse files
Googlernshahan
authored andcommitted
Add the ability wrap material chip content vs. using the default no-wrap/ellipses implementation.
PiperOrigin-RevId: 219820942
1 parent 73b3ede commit 49a4b3d

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

angular_components/lib/material_chips/_mixins.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,23 @@ $emphasis-selected-bg-color: $mat-blue-900;
136136
}
137137
}
138138

139+
/// Allow the chip to wrap instead of triggering ellipses.
140+
@mixin material-chip-wrapping() {
141+
material-chip {
142+
::ng-deep .content {
143+
white-space: normal;
144+
145+
// This ensures that the multi-line content has the same margins as the
146+
// single-line content.
147+
margin-top: $mat-grid;
148+
margin-bottom: $mat-grid;
149+
}
150+
151+
height: auto;
152+
min-height: $mat-grid * 4;
153+
}
154+
}
155+
139156
/// Use this mixin when chips are clickable for cursor, hover, and focus
140157
/// styling.
141158
///

0 commit comments

Comments
 (0)