From bc3028d789dc784561941e335d44b41ea36ed422 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 2 Nov 2016 11:48:23 +0000
Subject: [PATCH] #955 Horizontal scrollbar for dynamic table

---
 .../dynamic-table/dynamic-table.widget.css    |  5 +++
 .../dynamic-table/dynamic-table.widget.html   | 42 ++++++++++---------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css
index 7f133c4f0a..140696a06f 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.css
@@ -8,6 +8,11 @@
 }
 
 .dynamic-table-widget__table {
+    overflow-y: auto;
+    width: 100%;
+}
+
+.dynamic-table-widget__table > table {
     width: 100%;
 }
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
index dd39213e6c..3a1bfc2117 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html
@@ -2,26 +2,28 @@
      <div>{{content.name}}</div>
 
      <div *ngIf="!editMode">
-        <table class="mdl-data-table mdl-js-data-table dynamic-table-widget__table">
-            <thead>
-                <tr>
-                    <th *ngFor="let column of content.visibleColumns"
-                        class="mdl-data-table__cell--non-numeric">
-                        {{column.name}}
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr *ngFor="let row of content.rows"
-                    [class.dynamic-table-widget__row-selected]="row.selected">
-                    <td *ngFor="let column of content.visibleColumns"
-                        class="mdl-data-table__cell--non-numeric"
-                        (click)="onRowClicked(row)">
-                        {{ getCellValue(row, column) }}
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+         <div class="dynamic-table-widget__table">
+            <table class="mdl-data-table mdl-js-data-table">
+                <thead>
+                    <tr>
+                        <th *ngFor="let column of content.visibleColumns"
+                            class="mdl-data-table__cell--non-numeric">
+                            {{column.name}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let row of content.rows"
+                        [class.dynamic-table-widget__row-selected]="row.selected">
+                        <td *ngFor="let column of content.visibleColumns"
+                            class="mdl-data-table__cell--non-numeric"
+                            (click)="onRowClicked(row)">
+                            {{ getCellValue(row, column) }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+         </div>
 
         <div>
             <button class="mdl-button mdl-js-button mdl-button--icon"