From bf7658b431a81dd155b1cda0c42e5780bb7bfd25 Mon Sep 17 00:00:00 2001
From: Dario Gieselaar <dario.gieselaar@elastic.co>
Date: Wed, 11 Sep 2019 21:35:15 +0200
Subject: [PATCH] [APM] Fix IE layout issue for filters popover (#45370)

---
 .../shared/LocalUIFilters/Filter/index.tsx          | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
index 9f13ee3fbe59..aef8e5747d99 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
@@ -45,6 +45,11 @@ const ApplyButton = styled(EuiButton)`
   align-self: flex-end;
 `;
 
+// needed for IE11
+const FlexItem = styled(EuiFlexItem)`
+  flex-basis: auto !important;
+`;
+
 interface Props {
   name: string;
   title: string;
@@ -115,7 +120,7 @@ const Filter = ({
           {(list, search) => (
             <SelectContainer>
               <EuiFlexGroup direction="column" gutterSize="none">
-                <EuiFlexItem grow={true}>
+                <FlexItem grow={true}>
                   <EuiTitle size="xxxs" textTransform="uppercase">
                     <h4>
                       {i18n.translate('xpack.apm.applyFilter', {
@@ -130,8 +135,8 @@ const Filter = ({
                   <EuiSpacer size="s" />
                   {list}
                   <EuiSpacer size="s" />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
+                </FlexItem>
+                <FlexItem grow={false}>
                   <ApplyButton
                     color="primary"
                     fill={true}
@@ -149,7 +154,7 @@ const Filter = ({
                       defaultMessage: 'Apply options'
                     })}
                   </ApplyButton>
-                </EuiFlexItem>
+                </FlexItem>
               </EuiFlexGroup>
             </SelectContainer>
           )}