From 501fe481d58665da2a5434df31d8773a8f2eac00 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 14 May 2020 15:36:54 +0300 Subject: [PATCH 1/4] Fix IE specific flexbox min-height issue --- src/core/public/rendering/_base.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss index 8032bc458822f..6aa6d946cc7dd 100644 --- a/src/core/public/rendering/_base.scss +++ b/src/core/public/rendering/_base.scss @@ -73,7 +73,10 @@ display: flex; flex-flow: column nowrap; margin: 0 auto; - min-height: calc(100vh - #{$euiHeaderHeightCompensation}); + // IE needs this to be "height" instead of "min-height" + // "min-height" causes a bug described in the next link + // https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items + height: calc(100vh - #{$euiHeaderHeightCompensation}); &.hidden-chrome { min-height: 100vh; From ad4132b70bfbcccf9a88d34aba189e9b3e1a0730 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 14 May 2020 18:24:40 +0300 Subject: [PATCH 2/4] Use internetExplorerOnly mixin --- src/core/public/rendering/_base.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss index 6aa6d946cc7dd..1f9e35e62ddcc 100644 --- a/src/core/public/rendering/_base.scss +++ b/src/core/public/rendering/_base.scss @@ -73,10 +73,13 @@ display: flex; flex-flow: column nowrap; margin: 0 auto; - // IE needs this to be "height" instead of "min-height" - // "min-height" causes a bug described in the next link - // https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items - height: calc(100vh - #{$euiHeaderHeightCompensation}); + min-height: calc(100vh - #{$euiHeaderHeightCompensation}); + + @include internetExplorerOnly { + // IE specific bug with min-height in flex container, described in the next link + // https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items + height: calc(100vh - #{$euiHeaderHeightCompensation}); + } &.hidden-chrome { min-height: 100vh; From 4e91ab32ae46912a1052cde724b3f4668587655c Mon Sep 17 00:00:00 2001 From: sulemanof Date: Fri, 15 May 2020 14:12:23 +0300 Subject: [PATCH 3/4] Fix other issues in IE --- src/plugins/vis_default_editor/public/_default.scss | 3 +-- src/plugins/vis_default_editor/public/_sidebar.scss | 5 +++++ .../vis_default_editor/public/components/sidebar/sidebar.tsx | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index 2187baea547da..25220c322c8ff 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -70,8 +70,7 @@ .visEditor__visualization { display: flex; - flex-basis: 100%; - flex: 1; + flex: 1 1 auto; overflow: hidden; @include euiBreakpoint('xs', 's', 'm') { diff --git a/src/plugins/vis_default_editor/public/_sidebar.scss b/src/plugins/vis_default_editor/public/_sidebar.scss index ed92dc1dae884..42f7c4e6a892c 100644 --- a/src/plugins/vis_default_editor/public/_sidebar.scss +++ b/src/plugins/vis_default_editor/public/_sidebar.scss @@ -4,6 +4,11 @@ .visEditorSidebar { min-width: $vis-editor-sidebar-min-width; + + // a hack for IE, issue: https://github.com/elastic/kibana/issues/66586 + > .visEditorSidebar__formWrapper { + flex-basis: auto; + } } .visEditorSidebar__form { diff --git a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx index 9dfeae1815d1a..68b7ab06c4875 100644 --- a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx +++ b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx @@ -177,7 +177,7 @@ function DefaultEditorSideBar({ gutterSize="none" responsive={false} > - +
Date: Mon, 18 May 2020 23:43:02 +0300 Subject: [PATCH 4/4] Add a comment --- src/plugins/vis_default_editor/public/_default.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index 25220c322c8ff..f189b1c9e64a1 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -70,7 +70,7 @@ .visEditor__visualization { display: flex; - flex: 1 1 auto; + flex: 1 1 auto; // Fixes IE bug: the editor overflows a visualization on small screens overflow: hidden; @include euiBreakpoint('xs', 's', 'm') {