Skip to content

Commit

Permalink
Fix IE specific flexbox min-height issue (#66555) (#66961)
Browse files Browse the repository at this point in the history
* Fix IE specific flexbox min-height issue

* Use internetExplorerOnly mixin

* Fix other issues in IE

* Add a comment

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
sulemanof and elasticmachine authored May 19, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 15b6ba0 commit cf6fc28
Showing 4 changed files with 13 additions and 3 deletions.
6 changes: 6 additions & 0 deletions src/core/public/rendering/_base.scss
Original file line number Diff line number Diff line change
@@ -75,6 +75,12 @@
margin: 0 auto;
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;
}
3 changes: 1 addition & 2 deletions src/plugins/vis_default_editor/public/_default.scss
Original file line number Diff line number Diff line change
@@ -70,8 +70,7 @@

.visEditor__visualization {
display: flex;
flex-basis: 100%;
flex: 1;
flex: 1 1 auto; // Fixes IE bug: the editor overflows a visualization on small screens
overflow: hidden;

@include euiBreakpoint('xs', 's', 'm') {
5 changes: 5 additions & 0 deletions src/plugins/vis_default_editor/public/_sidebar.scss
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -177,7 +177,7 @@ function DefaultEditorSideBar({
gutterSize="none"
responsive={false}
>
<EuiFlexItem>
<EuiFlexItem className="visEditorSidebar__formWrapper">
<form
className="visEditorSidebar__form"
name="visualizeEditor"

0 comments on commit cf6fc28

Please sign in to comment.