From e5223e5d48a20211922183a67ae970a14c97a5c6 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Mon, 11 May 2020 14:43:17 +0200
Subject: [PATCH] Fix heigt calc in calc issue for ie11

---
 src/plugins/console/public/styles/_app.scss             | 5 ++++-
 x-pack/plugins/painless_lab/public/styles/_index.scss   | 7 +++++--
 x-pack/plugins/searchprofiler/public/styles/_index.scss | 5 ++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss
index 047db6e3ad877..c41df24912c2a 100644
--- 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
index df68a6450c191..e6c9574161fd8 100644
--- 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
index 5c35e9a23b8a1..e63042cf8fe2f 100644
--- 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;
 }