CSS fix for scrollable doc table in FireFox

Backports PR #10592 **Commit 1:** CSS fix for scrollable doc table in FireFox * Original sha: 9551029 * Authored by Stacey Gammon <[email protected]> on 2017-02-27T16:01:23Z **Commit 2:** add comments * Original sha: e162049 * Authored by Stacey Gammon <[email protected]> on 2017-02-27T18:40:20Z
elastic · Feb 28, 2017 · 1398125 · 1398125
1 parent 34d1e9f
commit 1398125
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/ui/public/doc_table/doc_table.html b/src/ui/public/doc_table/doc_table.html
@@ -1,4 +1,5 @@
 <div
+  class="doc-table-container"
   ng-if="hits.length"
   ng-class="{ loading: searchSource.activeFetchCount > 0 }">
   <paginate ng-if="!infiniteScroll" list="hits" per-page="50" top-controls="true">

diff --git a/src/ui/public/doc_table/doc_table.less b/src/ui/public/doc_table/doc_table.less
@@ -1,8 +1,20 @@
 @import (reference) "~ui/styles/variables";
 
+/**
+ * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height.
+ */
 doc-table {
   overflow: auto;
   flex: 1 1 100%;
+  flex-direction: column; /* 1 */
+
+  /**
+   * 1. Allow user to scroll table when its constrained by a fixed container height.
+   */
+  .doc-table-container {
+    flex: 1 1 0; /* 1 */
+    overflow: auto; /* 1 */
+  }
 
   .discover-table-datafield {
     white-space: pre-wrap;