Skip to content

Commit cbd1ff9

Browse files
andrewseguinkara
andrewseguin
authored and
kara
committed
fix(tabs): set tab body content to 100% (#3162)
Fixes #3153
1 parent 9cfe603 commit cbd1ff9

File tree

4 files changed

+117
-94
lines changed

4 files changed

+117
-94
lines changed

‎src/demo-app/tabs/tabs-demo.html‎

Lines changed: 108 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,59 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
4949
<md-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
5050
<md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
5151
<template md-tab-label>{{tab.label}}</template>
52+
<div class="tab-content">
53+
{{tab.content}}
54+
<br>
55+
<br>
56+
<div *ngIf="tab.extraContent">
57+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
58+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
59+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
60+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
61+
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
62+
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
63+
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
64+
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
65+
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
66+
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
67+
orci posuere, nec luctus mauris semper.
68+
<br>
69+
<br>
70+
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
71+
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
72+
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
73+
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
74+
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
75+
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
76+
<br>
77+
<br>
78+
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
79+
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
80+
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
81+
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
82+
</div>
83+
<br>
84+
<br>
85+
<md-input-container>
86+
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
87+
</md-input-container>
88+
<br><br>
89+
<button md-raised-button
90+
[disabled]="dynamicTabs.length == 1"
91+
(click)="deleteTab(tab)">
92+
Delete Tab
93+
</button>
94+
</div>
95+
</md-tab>
96+
</md-tab-group>
97+
</div>
98+
99+
<h1>Tab Group Demo - Dynamic Height</h1>
100+
101+
<md-tab-group class="demo-tab-group" dynamicHeight>
102+
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
103+
<template md-tab-label>{{tab.label}}</template>
104+
<div class="tab-content">
52105
{{tab.content}}
53106
<br>
54107
<br>
@@ -84,100 +137,53 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
84137
<md-input-container>
85138
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
86139
</md-input-container>
87-
<br><br>
88-
<button md-raised-button
89-
[disabled]="dynamicTabs.length == 1"
90-
(click)="deleteTab(tab)">
91-
Delete Tab
92-
</button>
93-
</md-tab>
94-
</md-tab-group>
95-
</div>
96-
97-
<h1>Tab Group Demo - Dynamic Height</h1>
98-
99-
<md-tab-group class="demo-tab-group" dynamicHeight>
100-
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
101-
<template md-tab-label>{{tab.label}}</template>
102-
{{tab.content}}
103-
<br>
104-
<br>
105-
<div *ngIf="tab.extraContent">
106-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
107-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
108-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
109-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
110-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
111-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
112-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
113-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
114-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
115-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
116-
orci posuere, nec luctus mauris semper.
117-
<br>
118-
<br>
119-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
120-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
121-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
122-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
123-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
124-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
125-
<br>
126-
<br>
127-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
128-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
129-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
130-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
131140
</div>
132-
<br>
133-
<br>
134-
<md-input-container>
135-
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
136-
</md-input-container>
137141
</md-tab>
138142
</md-tab-group>
139143

140144

141145
<h1>Tab Group Demo - Fixed Height</h1>
142146

143-
<md-tab-group class="demo-tab-group" style="height: 200px">
147+
<md-tab-group class="demo-tab-group" style="height: 220px">
144148
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
145149
<template md-tab-label>{{tab.label}}</template>
146-
{{tab.content}}
147-
<br>
148-
<br>
149-
<div *ngIf="tab.extraContent">
150-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
151-
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
152-
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
153-
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
154-
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
155-
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
156-
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
157-
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
158-
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
159-
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
160-
orci posuere, nec luctus mauris semper.
150+
<div class="tab-content">
151+
{{tab.content}}
161152
<br>
162153
<br>
163-
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
164-
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
165-
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
166-
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
167-
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
168-
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
154+
<div *ngIf="tab.extraContent">
155+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
156+
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
157+
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
158+
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
159+
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
160+
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
161+
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
162+
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
163+
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
164+
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
165+
orci posuere, nec luctus mauris semper.
166+
<br>
167+
<br>
168+
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
169+
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
170+
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
171+
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
172+
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
173+
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
174+
<br>
175+
<br>
176+
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
177+
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
178+
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
179+
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
180+
</div>
169181
<br>
170182
<br>
171-
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
172-
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
173-
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
174-
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
183+
<md-input-container>
184+
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
185+
</md-input-container>
175186
</div>
176-
<br>
177-
<br>
178-
<md-input-container>
179-
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
180-
</md-input-container>
181187
</md-tab>
182188
</md-tab-group>
183189

@@ -186,7 +192,9 @@ <h1>Stretched Tabs</h1>
186192
<md-tab-group class="demo-tab-group" style="height: 200px" md-stretch-tabs>
187193
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
188194
<template md-tab-label>{{tab.label}}</template>
189-
{{tab.content}}
195+
<div class="tab-content">
196+
{{tab.content}}
197+
</div>
190198
</md-tab>
191199
</md-tab-group>
192200

@@ -196,21 +204,26 @@ <h1>Async Tabs</h1>
196204
<md-tab-group class="demo-tab-group">
197205
<md-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
198206
<template md-tab-label>{{tab.label}}</template>
199-
{{tab.content}}
200-
<br>
201-
<br>
202-
<br>
203-
<md-input-container>
204-
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
205-
</md-input-container>
207+
208+
<div class="tab-content">
209+
{{tab.content}}
210+
<br>
211+
<br>
212+
<br>
213+
<md-input-container>
214+
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
215+
</md-input-container>
216+
</div>
206217
</md-tab>
207218
</md-tab-group>
208219

209220
<!-- Simple tabs api -->
210221
<h1>Tabs with simplified api</h1>
211222
<md-tab-group class="demo-tab-group">
212223
<md-tab label="Earth">
213-
This tab is about the Earth!
224+
<div class="tab-content">
225+
This tab is about the Earth!
226+
</div>
214227
</md-tab>
215228
<md-tab label="Fire">
216229
This tab is about combustion!
@@ -220,9 +233,13 @@ <h1>Tabs with simplified api</h1>
220233
<h1>Inverted tabs</h1>
221234
<md-tab-group class="demo-tab-group" headerPosition="below">
222235
<md-tab label="Earth">
223-
This tab is about the Earth!
236+
<div class="tab-content">
237+
This tab is about the Earth!
238+
</div>
224239
</md-tab>
225240
<md-tab label="Fire">
226-
This tab is about combustion!
241+
<div class="tab-content">
242+
This tab is about combustion!
243+
</div>
227244
</md-tab>
228245
</md-tab-group>

‎src/demo-app/tabs/tabs-demo.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,10 @@
1515
.demo-tab-group {
1616
border: 1px solid #e0e0e0;
1717
margin-bottom: 40px;
18+
flex-grow: 1;
1819
.mat-tab-header {
1920
background: #f9f9f9;
2021
}
21-
.mat-tab-body-content {
22-
padding: 12px;
23-
}
2422
}
2523

2624
tabs-demo .mat-card {
@@ -56,3 +54,7 @@ tabs-demo .mat-card {
5654
}
5755
}
5856
}
57+
58+
.tab-content {
59+
padding: 16px;
60+
}

‎src/lib/tabs/tab-body.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mat-tab-body-content {
2+
height: 100%;
3+
}

‎src/lib/tabs/tab-body.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
4848
moduleId: module.id,
4949
selector: 'md-tab-body, mat-tab-body',
5050
templateUrl: 'tab-body.html',
51+
styleUrls: ['tab-body.css'],
5152
host: {
5253
'[class.mat-tab-body]': 'true',
5354
},

0 commit comments

Comments
 (0)