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

jloleysens · May 12, 2020 · 235de87 · 235de87
1 parent 4eb2cdf
commit 235de87
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss
@@ -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

diff --git a/x-pack/plugins/painless_lab/public/styles/_index.scss b/x-pack/plugins/painless_lab/public/styles/_index.scss
@@ -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 {

diff --git a/x-pack/plugins/searchprofiler/public/styles/_index.scss b/x-pack/plugins/searchprofiler/public/styles/_index.scss
@@ -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;
 }