fix(tabs): set tab body content to 100% (#3162)

Fixes #3153
angular · Feb 27, 2017 · cbd1ff9 · cbd1ff9
1 parent 9cfe603
commit cbd1ff9
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 94 deletions.
diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
@@ -49,6 +49,59 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
   <md-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
     <md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
       <template md-tab-label>{{tab.label}}</template>
+      <div class="tab-content">
+        {{tab.content}}
+        <br>
+        <br>
+        <div *ngIf="tab.extraContent">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
+          gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
+          diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
+          ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
+          venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
+          Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
+          orci posuere, nec luctus mauris semper.
+          <br>
+          <br>
+          Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
+          magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
+          Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
+          Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
+          tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
+          nisl consectetur, rhoncus sapien sit amet, tempus sapien.
+          <br>
+          <br>
+          Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
+          molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
+          at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
+          Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
+        </div>
+        <br>
+        <br>
+        <md-input-container>
+          <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
+        </md-input-container>
+        <br><br>
+        <button md-raised-button
+                [disabled]="dynamicTabs.length == 1"
+                (click)="deleteTab(tab)">
+          Delete Tab
+        </button>
+      </div>
+    </md-tab>
+  </md-tab-group>
+</div>
+
+<h1>Tab Group Demo - Dynamic Height</h1>
+
+<md-tab-group class="demo-tab-group" dynamicHeight>
+  <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
+    <template md-tab-label>{{tab.label}}</template>
+    <div class="tab-content">
       {{tab.content}}
       <br>
       <br>
@@ -84,100 +137,53 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
       <md-input-container>
         <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
       </md-input-container>
-      <br><br>
-      <button md-raised-button
-              [disabled]="dynamicTabs.length == 1"
-              (click)="deleteTab(tab)">
-        Delete Tab
-      </button>
-    </md-tab>
-  </md-tab-group>
-</div>
-
-<h1>Tab Group Demo - Dynamic Height</h1>
-
-<md-tab-group class="demo-tab-group" dynamicHeight>
-  <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
-    <template md-tab-label>{{tab.label}}</template>
-    {{tab.content}}
-    <br>
-    <br>
-    <div *ngIf="tab.extraContent">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-      orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
-      gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
-      diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
-      ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
-      venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
-      Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
-      orci posuere, nec luctus mauris semper.
-      <br>
-      <br>
-      Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
-      magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
-      Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
-      Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
-      tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
-      nisl consectetur, rhoncus sapien sit amet, tempus sapien.
-      <br>
-      <br>
-      Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
-      molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
-      at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
-      Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
     </div>
-    <br>
-    <br>
-    <md-input-container>
-      <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
-    </md-input-container>
   </md-tab>
 </md-tab-group>
 
 
 <h1>Tab Group Demo - Fixed Height</h1>
 
-<md-tab-group class="demo-tab-group" style="height: 200px">
+<md-tab-group class="demo-tab-group" style="height: 220px">
   <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
     <template md-tab-label>{{tab.label}}</template>
-    {{tab.content}}
-    <br>
-    <br>
-    <div *ngIf="tab.extraContent">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-      orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
-      gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
-      diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
-      ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
-      venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
-      Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
-      orci posuere, nec luctus mauris semper.
+    <div class="tab-content">
+      {{tab.content}}
       <br>
       <br>
-      Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
-      magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
-      Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
-      Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
-      tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
-      nisl consectetur, rhoncus sapien sit amet, tempus sapien.
+      <div *ngIf="tab.extraContent">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+        Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+        In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+        feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+        orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
+        gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
+        diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
+        ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
+        venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
+        Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
+        orci posuere, nec luctus mauris semper.
+        <br>
+        <br>
+        Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
+        magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
+        Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
+        Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
+        tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
+        nisl consectetur, rhoncus sapien sit amet, tempus sapien.
+        <br>
+        <br>
+        Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
+        molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
+        at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
+        Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
+      </div>
       <br>
       <br>
-      Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
-      molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
-      at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
-      Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
+      <md-input-container>
+        <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
+      </md-input-container>
     </div>
-    <br>
-    <br>
-    <md-input-container>
-      <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
-    </md-input-container>
   </md-tab>
 </md-tab-group>
 
@@ -186,7 +192,9 @@ <h1>Stretched Tabs</h1>
 <md-tab-group class="demo-tab-group" style="height: 200px" md-stretch-tabs>
   <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
     <template md-tab-label>{{tab.label}}</template>
-    {{tab.content}}
+    <div class="tab-content">
+      {{tab.content}}
+    </div>
   </md-tab>
 </md-tab-group>
 
@@ -196,21 +204,26 @@ <h1>Async Tabs</h1>
 <md-tab-group class="demo-tab-group">
   <md-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
     <template md-tab-label>{{tab.label}}</template>
-    {{tab.content}}
-    <br>
-    <br>
-    <br>
-    <md-input-container>
-      <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
-    </md-input-container>
+
+    <div class="tab-content">
+      {{tab.content}}
+      <br>
+      <br>
+      <br>
+      <md-input-container>
+        <input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
+      </md-input-container>
+    </div>
   </md-tab>
 </md-tab-group>
 
 <!-- Simple tabs api -->
 <h1>Tabs with simplified api</h1>
 <md-tab-group class="demo-tab-group">
   <md-tab label="Earth">
-    This tab is about the Earth!
+    <div class="tab-content">
+      This tab is about the Earth!
+    </div>
   </md-tab>
   <md-tab label="Fire">
     This tab is about combustion!
@@ -220,9 +233,13 @@ <h1>Tabs with simplified api</h1>
 <h1>Inverted tabs</h1>
 <md-tab-group class="demo-tab-group" headerPosition="below">
   <md-tab label="Earth">
-    This tab is about the Earth!
+    <div class="tab-content">
+      This tab is about the Earth!
+    </div>
   </md-tab>
   <md-tab label="Fire">
-    This tab is about combustion!
+    <div class="tab-content">
+      This tab is about combustion!
+    </div>
   </md-tab>
 </md-tab-group>
diff --git a/src/demo-app/tabs/tabs-demo.scss b/src/demo-app/tabs/tabs-demo.scss
@@ -15,12 +15,10 @@
 .demo-tab-group {
   border: 1px solid #e0e0e0;
   margin-bottom: 40px;
+  flex-grow: 1;
   .mat-tab-header {
     background: #f9f9f9;
   }
-  .mat-tab-body-content {
-    padding: 12px;
-  }
 }
 
 tabs-demo .mat-card {
@@ -56,3 +54,7 @@ tabs-demo .mat-card {
     }
   }
 }
+
+.tab-content {
+  padding: 16px;
+}
diff --git a/src/lib/tabs/tab-body.scss b/src/lib/tabs/tab-body.scss
@@ -0,0 +1,3 @@
+.mat-tab-body-content {
+  height: 100%;
+}
diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts
@@ -48,6 +48,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
   moduleId: module.id,
   selector: 'md-tab-body, mat-tab-body',
   templateUrl: 'tab-body.html',
+  styleUrls: ['tab-body.css'],
   host: {
     '[class.mat-tab-body]': 'true',
   },