allow the table to take up as much space as needed, rather than 50%

elastic · Jun 4, 2014 · 9f032ce · 9f032ce
1 parent c44aff6
commit 9f032ce
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 26 deletions.
diff --git a/src/kibana/apps/dashboard/styles/main.css b/src/kibana/apps/dashboard/styles/main.css
@@ -106,6 +106,7 @@ dashboard-grid {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
+  display: -ms-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;

diff --git a/src/kibana/apps/visualize/styles/visualization.css b/src/kibana/apps/visualize/styles/visualization.css
@@ -73,16 +73,17 @@ visualize {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
+  display: -ms-box;
   display: -webkit-flex;
   display: flex;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-  position: relative;
   -webkit-flex-direction: column;
   -moz-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  position: relative;
 }
 visualize .visualize-error {
   margin-top: 20px;
@@ -104,15 +105,19 @@ visualize .visualize-show-table {
 visualize .visualize-show-table.active {
   margin-bottom: 10px;
 }
-visualize .visualize-chart,
-visualize .visualize-table {
+visualize .visualize-chart {
   -webkit-flex-grow: 1;
   -moz-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
-  height: 50%;
-}
-visualize .visualize-chart {
+  -webkit-flex-shrink: 1;
+  -moz-flex-shrink: 1;
+  -ms-flex-shrink: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 100%;
+  -moz-flex-basis: 100%;
+  -ms-flex-basis: 100%;
+  flex-basis: 100%;
   overflow: hidden;
 }
 visualize .visualize-chart.table-visible {
@@ -123,7 +128,7 @@ visualize .visualize-chart.only-table {
 }
 visualize .visualize-table {
   display: none;
-  overflow: auto;
+  overflow: hidden;
 }
 visualize .visualize-table.visible {
   display: block;

diff --git a/src/kibana/apps/visualize/styles/visualization.less b/src/kibana/apps/visualize/styles/visualization.less
@@ -5,11 +5,11 @@
 
 visualize {
   .flex-display();
+  .flex-direction(column);
   height: 100%;
   width: 100%;
   overflow: auto;
   position: relative;
-  .flex-direction(column);
 
   .visualize-error {
     margin-top: 20px;
@@ -35,13 +35,10 @@ visualize {
     }
   }
 
-  .visualize-chart,
-  .visualize-table {
-    .flex-grow(1);
-    height: 50%;
-  }
-
   .visualize-chart {
+    .flex-grow(1);
+    .flex-shrink(1);
+    .flex-basis(100%);
     overflow: hidden;
 
     &.table-visible {
@@ -55,7 +52,7 @@ visualize {
 
   .visualize-table {
     display: none;
-    overflow: auto;
+    overflow: hidden;
 
     &.visible {
       display: block;

diff --git a/src/kibana/styles/_mixins.less b/src/kibana/styles/_mixins.less
@@ -136,11 +136,11 @@
   -ms-transform-origin:     @x @y;
   -o-transform-origin:      @x @y;
 }
-
 .flex-display () {
   display: -webkit-box;
   display: -moz-box;
-  display: -ms-flexbox;
+  display: -ms-flexbox; // IE10 uses -ms-flexbox
+  display: -ms-box; // IE10 uses -ms-flexbox
   display: -webkit-flex;
   display: flex;
 }
@@ -150,18 +150,30 @@
   -ms-flex-direction: @rule;
   flex-direction: @rule;
 }
-.justify-content (@rule) {
-  -webkit-justify-content: @rule;
-  -moz-justify-content: @rule;
-  -ms-justify-content: @rule;
-  justify-content: @rule;
-}
 .flex-grow (@rule) {
   -webkit-flex-grow: @rule;
   -moz-flex-grow: @rule;
   -ms-flex-grow: @rule;
   flex-grow: @rule;
 }
+.flex-shrink (@rule) {
+  -webkit-flex-shrink: @rule;
+  -moz-flex-shrink: @rule;
+  -ms-flex-shrink: @rule;
+  flex-shrink: @rule;
+}
+.flex-basis (@rule) {
+  -webkit-flex-basis: @rule;
+  -moz-flex-basis: @rule;
+  -ms-flex-basis: @rule;
+  flex-basis: @rule;
+}
+.justify-content (@rule) {
+  -webkit-justify-content: @rule;
+  -moz-justify-content: @rule;
+  -ms-justify-content: @rule;
+  justify-content: @rule;
+}
 .prevent-selection () {
   -webkit-touch-callout: none;
   -webkit-user-select: none;

diff --git a/src/kibana/styles/main.css b/src/kibana/styles/main.css
@@ -6961,6 +6961,7 @@ paginate {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
+  display: -ms-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
@@ -6972,6 +6973,7 @@ paginate paginate-controls {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
+  display: -ms-box;
   display: -webkit-flex;
   display: flex;
   padding: 5px;