diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts
index 985814c9c4ed..38b34fa17de1 100644
--- a/src/lib/core/line/line.ts
+++ b/src/lib/core/line/line.ts
@@ -30,12 +30,15 @@ export class MdLineSetter {
this._resetClasses();
if (count === 2 || count === 3) {
this._setClass(`md-${count}-line`, true);
+ } else if (count > 3) {
+ this._setClass(`md-multi-line`, true);
}
}
private _resetClasses(): void {
this._setClass('md-2-line', false);
this._setClass('md-3-line', false);
+ this._setClass('md-multi-line', false);
}
private _setClass(className: string, bool: boolean): void {
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index ac7190559c98..f09ac26b357f 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -50,10 +50,18 @@ $md-dense-three-line-height: 76px;
height: $two-line-height;
}
+
&.md-3-line .md-list-item {
height: $three-line-height;
}
+ // list items with more than 3 lines should expand to match
+ // the height of its contained text
+ &.md-multi-line .md-list-item {
+ height: 100%;
+ padding: 8px $md-list-side-padding;
+ }
+
.md-list-text {
@include md-line-wrapper-base();
padding: 0 $md-list-side-padding;
diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts
index b74a839a04c6..d8ebef1c604b 100644
--- a/src/lib/list/list.spec.ts
+++ b/src/lib/list/list.spec.ts
@@ -18,6 +18,7 @@ describe('MdList', () => {
ListWithItemWithCssClass,
ListWithDynamicNumberOfLines,
ListWithMultipleItems,
+ ListWithManyLines,
],
});
@@ -65,6 +66,15 @@ describe('MdList', () => {
expect(listItems[1].nativeElement.className).toBe('md-3-line');
});
+ it('should apply md-multi-line class to lists with more than 3 lines', () => {
+ let fixture = TestBed.createComponent(ListWithManyLines);
+ fixture.detectChanges();
+
+ let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
+ expect(listItems[0].nativeElement.className).toBe('md-multi-line');
+ expect(listItems[1].nativeElement.className).toBe('md-multi-line');
+ });
+
it('should apply md-list-avatar class to list items with avatars', () => {
let fixture = TestBed.createComponent(ListWithAvatar);
fixture.detectChanges();
@@ -152,6 +162,17 @@ class ListWithTwoLineItem extends BaseTestList { }
`})
class ListWithThreeLineItem extends BaseTestList { }
+@Component({template: `
+
+
+ Line 1
+ Line 2
+ Line 3
+ Line 4
+
+ `})
+class ListWithManyLines extends BaseTestList { }
+
@Component({template: `