From fef74373e0a5b5ff95308ac21fe52c68f74036a5 Mon Sep 17 00:00:00 2001
From: Vladyslav <vprykhodko@thingsboard.io>
Date: Wed, 1 Apr 2020 09:42:03 +0300
Subject: [PATCH] Fix timeseries table layout (#2569)

---
 .../widget/lib/timeseries-table-widget.scss   |  4 -
 .../lib/timeseries-table-widget.tpl.html      | 96 ++++++++++---------
 2 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/ui/src/app/widget/lib/timeseries-table-widget.scss b/ui/src/app/widget/lib/timeseries-table-widget.scss
index 4381ee7f1e..9e8ed9ea3a 100644
--- a/ui/src/app/widget/lib/timeseries-table-widget.scss
+++ b/ui/src/app/widget/lib/timeseries-table-widget.scss
@@ -31,10 +31,6 @@ tb-timeseries-table-widget {
     z-index: 10;
   }
 
-  md-table-container {
-    overflow-x: visible;
-  }
-
   md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
     min-height: 0;
   }
diff --git a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
index b41bdf7d5c..1a7194b3f9 100644
--- a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
+++ b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
@@ -38,56 +38,58 @@
             </div>
         </md-toolbar>
 
-        <md-tabs flex md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}"
+        <md-tabs md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}"
                  id="tabs" md-border-bottom flex>
             <md-tab ng-repeat="source in vm.sources" label="{{ source.datasource.name }}">
-                <md-table-container class="flex">
-                    <table md-table>
-                        <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)">
-                            <tr md-row>
-                                <th ng-show="vm.showTimestamp"
-                                    md-column md-order-by="0"
-                                >
-                                    <span>Timestamp</span>
-                                </th>
-                                <th md-column
-                                    md-order-by="{{ h.index }}"
-                                    ng-repeat="h in source.ts.header"
-                                >
-                                    <span>{{ h.dataKey.label }}</span>
-                                </th>
-                            </tr>
-                        </thead>
+                <div class="tb-absolute-fill" layout="column">
+                    <md-table-container flex>
+                        <table md-table>
+                            <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)">
+                                <tr md-row>
+                                    <th ng-show="vm.showTimestamp"
+                                        md-column md-order-by="0"
+                                    >
+                                        <span>Timestamp</span>
+                                    </th>
+                                    <th md-column
+                                        md-order-by="{{ h.index }}"
+                                        ng-repeat="h in source.ts.header"
+                                    >
+                                        <span>{{ h.dataKey.label }}</span>
+                                    </th>
+                                </tr>
+                            </thead>
 
-                        <tbody md-body>
-                            <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
-                                <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
-                                    md-cell
-                                    ng-repeat="d in row track by $index"
-                                    ng-style="vm.cellStyle(source, $index, d)"
-                                    ng-bind-html="vm.cellContent(source, $index, row, d)"
-                                ></td>
-                                <td md-cell class="tb-action-cell"
-                                    ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
-                                               maxWidth: vm.actionCellDescriptors.length*36+'px',
-                                               width: vm.actionCellDescriptors.length*36+'px'}">
-                                    <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
-                                               aria-label="{{ actionDescriptor.displayName }}"
-                                               ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
-                                       <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
-                                       <md-tooltip md-direction="top">
-                                           {{ actionDescriptor.displayName }}
-                                       </md-tooltip>
-                                    </md-button>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <md-divider></md-divider>
-                    <span ng-show="!vm.sources[vm.sourceIndex].data.length"
-                          layout-align="center center"
-                          class="no-data-found" translate>widget.no-data-found</span>
-                </md-table-container>
+                            <tbody md-body>
+                                <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
+                                    <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
+                                        md-cell
+                                        ng-repeat="d in row track by $index"
+                                        ng-style="vm.cellStyle(source, $index, d)"
+                                        ng-bind-html="vm.cellContent(source, $index, row, d)"
+                                    ></td>
+                                    <td md-cell class="tb-action-cell"
+                                        ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
+                                                   maxWidth: vm.actionCellDescriptors.length*36+'px',
+                                                   width: vm.actionCellDescriptors.length*36+'px'}">
+                                        <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
+                                                   aria-label="{{ actionDescriptor.displayName }}"
+                                                   ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
+                                           <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
+                                           <md-tooltip md-direction="top">
+                                               {{ actionDescriptor.displayName }}
+                                           </md-tooltip>
+                                        </md-button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <md-divider></md-divider>
+                        <span ng-show="!vm.sources[vm.sourceIndex].data.length"
+                              layout-align="center center"
+                              class="no-data-found" translate>widget.no-data-found</span>
+                    </md-table-container>
+                </div>
             </md-tab>
         </md-tabs>
         <md-table-pagination ng-if="vm.displayPagination"