fix(tabs): dynamic tab scrollbar showing while animating

Fixes an issue that caused a scrollbar to be shown only while a tab inside a dynamic height tab group is animating. Relates to angular#4035.
crisbeto · May 13, 2017 · 9dfadae · 9dfadae
1 parent 6121fa1
commit 9dfadae
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/lib/tabs/tab-body.scss b/src/lib/tabs/tab-body.scss
@@ -1,4 +1,8 @@
 .mat-tab-body-content {
   height: 100%;
   overflow: auto;
+
+  .mat-tab-group-dynamic-height & {
+    overflow: hidden;
+  }
 }
diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts
@@ -8,6 +8,7 @@ import {
   ElementRef,
   Optional,
   AfterViewChecked,
+  ViewEncapsulation,
 } from '@angular/core';
 import {
   trigger,
@@ -50,6 +51,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
   selector: 'md-tab-body, mat-tab-body',
   templateUrl: 'tab-body.html',
   styleUrls: ['tab-body.css'],
+  encapsulation: ViewEncapsulation.None,
   host: {
     '[class.mat-tab-body]': 'true',
   },