[Infra UI] Work around IE11 flexbox alignment problems (#25224)

This works around some IE11 bugs with flexbox alignment, particularly [Flexbug #4](https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored) and a misinterpretation of the default alignment. fixes #24758 fixes #24839 fixes #24791 fixes #24757
elastic · Nov 7, 2018 · 2cabf4f · 2cabf4f
1 parent 4d28055
commit 2cabf4f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 11 deletions.
diff --git a/x-pack/plugins/infra/public/components/empty_page.tsx b/x-pack/plugins/infra/public/components/empty_page.tsx
@@ -6,6 +6,7 @@
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
+import styled from 'styled-components';
 
 interface EmptyPageProps {
   message: string;
@@ -22,7 +23,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
   title,
   ...rest
 }) => (
-  <EuiEmptyPrompt
+  <CenteredEmptyPrompt
     title={<h2>{title}</h2>}
     body={<p>{message}</p>}
     actions={
@@ -33,3 +34,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
     {...rest}
   />
 );
+
+const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+  align-self: center;
+`;
diff --git a/x-pack/plugins/infra/public/components/page.tsx b/x-pack/plugins/infra/public/components/page.tsx
@@ -11,16 +11,16 @@ export const ColumnarPage = styled.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  flex: 1 0 0;
+  flex: 1 0 0%;
 `;
 
 export const PageContent = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   flex-direction: row;
   background-color: ${props => props.theme.eui.euiColorEmptyShade};
 `;
 
 export const FlexPage = styled(EuiPage)`
-  flex: 1 0 0;
+  flex: 1 0 0%;
 `;
diff --git a/x-pack/plugins/infra/public/components/waffle/index.tsx b/x-pack/plugins/infra/public/components/waffle/index.tsx
@@ -96,7 +96,7 @@ export class Waffle extends React.Component<Props, {}> {
       return <InfraLoadingPanel height="100%" width="100%" text="Loading data" />;
     } else if (!loading && map && map.length === 0) {
       return (
-        <EuiEmptyPrompt
+        <CenteredEmptyPrompt
           title={<h2>There is no data to display.</h2>}
           titleSize="m"
           body={<p>Try adjusting your time or filter.</p>}
@@ -206,7 +206,7 @@ export class Waffle extends React.Component<Props, {}> {
 }
 
 const WaffleMapOuterContiner = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -222,3 +222,7 @@ const WaffleMapInnerContainer = styled.div`
   align-content: flex-start;
   padding: 10px;
 `;
+
+const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+  align-self: center;
+`;
diff --git a/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
@@ -117,7 +117,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
       template: `
         <div
           id="${ROOT_ELEMENT_ID}"
-          style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0; overflow: hidden;"
+          style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0%; overflow: hidden;"
         ></div>
       `,
     }));
@@ -140,7 +140,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
     uiRoutes.otherwise({
       reloadOnSearch: false,
       template:
-        '<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0;"></infra-ui-kibana-adapter>',
+        '<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0%;"></infra-ui-kibana-adapter>',
     });
   };
 }

diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -106,14 +106,14 @@ export const LogsPageContent: React.SFC = () => (
 );
 
 const LogPageEventStreamColumn = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 `;
 
 const LogPageMinimapColumn = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   overflow: hidden;
   min-width: 100px;
   max-width: 100px;

diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -222,7 +222,7 @@ const EuiSideNavContainer = styled.div`
 `;
 
 const MetricsDetailsPageColumn = styled.div`
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   flex-direction: column;
 `;