fix(stepper): horizontal scroll was not appearing when needed in cert…

…ain cases. (closes #282) (#640) * fix(stepper): horizontal scroll was not appearing when needed in certain cases * fix(stepper): missing auto overflow for content * fix(): missing autocomplete module in components * fix(stepper): add cdkScrollable to have a hook for repositioning autocomplete, etc
Teradata · May 30, 2017 · 9542139 · 9542139
1 parent 8e9ab29
commit 9542139
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
@@ -94,6 +94,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     MdTabsModule,
     MdTooltipModule,
     MdProgressBarModule,
+    MdAutocompleteModule,
     /** Covalent Modules */
     CovalentCommonModule,
     CovalentLayoutModule,

diff --git a/src/platform/core/steps/step-body/step-body.component.html b/src/platform/core/steps/step-body/step-body.component.html
@@ -1,9 +1,9 @@
 <div layout="row" flex>
   <ng-content></ng-content>
-  <div flex>
+  <div class="td-step-body" flex>
     <div class="td-step-content-wrapper"
          [@tdCollapse]="!active">
-      <div #contentRef [class.td-step-content]="contentRef.children.length || contentRef.textContent.trim()">
+      <div #contentRef cdkScrollable [class.td-step-content]="contentRef.children.length || contentRef.textContent.trim()">
         <ng-content select="[td-step-body-content]"></ng-content>
       </div>
       <div #actionsRef layout="row" [class.td-step-actions]="actionsRef.children.length || actionsRef.textContent.trim()">

diff --git a/src/platform/core/steps/step-body/step-body.component.scss b/src/platform/core/steps/step-body/step-body.component.scss
@@ -0,0 +1,6 @@
+.td-step-body {
+  overflow-x: hidden;
+  .td-step-content {
+    overflow-x: auto; 
+  }
+}
diff --git a/src/platform/core/steps/steps.module.ts b/src/platform/core/steps/steps.module.ts
@@ -2,7 +2,7 @@ import { Type } from '@angular/core';
 import { NgModule, ModuleWithProviders } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
-import { MdIconModule, MdRippleModule, PortalModule } from '@angular/material';
+import { MdIconModule, MdRippleModule, PortalModule, ScrollDispatchModule } from '@angular/material';
 
 import { CovalentCommonModule } from '../common/common.module';
 
@@ -32,6 +32,7 @@ export { TdStepsComponent, IStepChangeEvent, StepMode } from './steps.component'
     MdIconModule,
     MdRippleModule,
     PortalModule,
+    ScrollDispatchModule,
     CovalentCommonModule,
   ],
   declarations: [