Backport PR elastic#8351

--------- **Commit 1:** Prevents lengend from expanding page * Legends will overflow along the y-axis, maintaining a 100% height of the page * With these changes, space-between would at times place the text out of view Signed-off-by: Tyler Smalley <[email protected]> * Original sha: bb6632f * Authored by Tyler Smalley <[email protected]> on 2016-09-19T21:29:06Z
airow · Sep 21, 2016 · fbf3048 · fbf3048
1 parent 68d2bf0
commit fbf3048
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
@@ -7,6 +7,12 @@
 .vis-editor {
   .flex-parent();
 
+  @media (min-width: @screen-md-min) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
   .btn-xs {
     line-height: 1.3;
   }

diff --git a/src/core_plugins/metric_vis/public/metric_vis.less b/src/core_plugins/metric_vis/public/metric_vis.less
@@ -7,7 +7,6 @@
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
-  align-content: space-around;
 
   .metric-value {
     font-weight: bold;

diff --git a/src/ui/public/visualize/visualize.less b/src/ui/public/visualize/visualize.less
@@ -15,11 +15,19 @@ visualize {
   .vis-container {
     display: flex;
     flex-direction: row;
-
-    flex: 1 0;
     overflow: auto;
     -webkit-transition: opacity 0.01s;
     transition: opacity 0.01s;
+    flex: 1 1 0;
+
+    // IE11 Hack
+    //
+    // Normally we would just set flex: 1 1 0%, which works as expected in IE11.
+    // Unfortunately, a recent bug in Firefox causes this rule to be ignored, so we
+    // have to use an IE-specific hack instead.
+    _:-ms-fullscreen, :root  & {
+      flex: 1 0;
+    }
 
     &.vis-container--legend-left {
       flex-direction: row-reverse;