Fix heigt calc in calc issue for ie11 (#66010)

This commit is contained in:
Jean-Louis Leysens 2020-05-12 09:37:03 +02:00 committed by GitHub
parent 96bc663862
commit 2ad2bfa906
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 4 deletions

View file

@ -1,8 +1,11 @@
// TODO: Move all of the styles here (should be modularised by, e.g., CSS-in-JS or CSS modules).
@import '@elastic/eui/src/components/header/variables';
// This value is calculated to static value using SCSS because calc in calc has issues in IE11
$headerHeightOffset: $euiHeaderHeightCompensation * 2;
#consoleRoot {
height: calc(100vh - calc(#{$euiHeaderChildSize} * 2));
height: calc(100vh - #{$headerHeightOffset});
display: flex;
flex: 1 1 auto;
// Make sure the editor actions don't create scrollbars on this container

View file

@ -5,7 +5,7 @@
* This is a very brittle way of preventing the editor and other content from disappearing
* behind the bottom bar.
*/
$bottomBarHeight: calc(#{$euiSize} * 3);
$bottomBarHeight: $euiSize * 3;
.painlessLabBottomBarPlaceholder {
height: $bottomBarHeight;
@ -40,8 +40,11 @@ $bottomBarHeight: calc(#{$euiSize} * 3);
line-height: 0;
}
// This value is calculated to static value using SCSS because calc in calc has issues in IE11
$headerHeightOffset: $euiHeaderHeightCompensation * 2;
.painlessLabMainContainer {
height: calc(100vh - calc(#{$euiHeaderChildSize} * 2) - #{$bottomBarHeight});
height: calc(100vh - #{$headerHeightOffset} - #{$bottomBarHeight});
}
.painlessLabPanelsContainer {

View file

@ -47,8 +47,11 @@
}
}
// This value is calculated to static value using SCSS because calc in calc has issues in IE11
$headerHeightOffset: $euiHeaderHeightCompensation * 2;
.appRoot {
height: calc(100vh - calc(#{$euiHeaderChildSize} * 2));
height: calc(100vh - #{$headerHeightOffset});
overflow: hidden;
flex-shrink: 1;
}