maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[6.x] [Infra UI] Work around IE11 flexbox alignment problems (#25224) (#25281)

Browse source 
Backports the following commits to 6.x:
 - [Infra UI] Work around IE11 flexbox alignment problems  (#25224)
This commit is contained in:
Felix Stürmer 2018-11-07 14:51:16 +01:00 committed by GitHub
parent 9b04e556be
commit f55b39d195
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
x-pack/plugins/infra/public/components/empty_page.tsx
View file

@ -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;
`;

6
x-pack/plugins/infra/public/components/page.tsx
View file

@ -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%;
`;

8
x-pack/plugins/infra/public/components/waffle/index.tsx
View file

@ -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;
`;

4
x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
View file

@ -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>',
});
};
}

4
x-pack/plugins/infra/public/pages/logs/page_content.tsx
View file

@ -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;

2
x-pack/plugins/infra/public/pages/metrics/index.tsx
View file

@ -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;
`;