Fix safari layout issue in Visualize, Graph and Lens (#54694)
This commit is contained in:
parent
79054afb5a
commit
97d460e051
|
@ -86,11 +86,9 @@ export const renderApp = (element: HTMLElement, appBasePath: string, deps: Rende
|
|||
};
|
||||
};
|
||||
|
||||
const mainTemplate = (basePath: string) => `<div style="height: 100%">
|
||||
const mainTemplate = (basePath: string) => `<div ng-view class="kbnLocalApplicationWrapper">
|
||||
<base href="${basePath}" />
|
||||
<div ng-view style="height: 100%;"></div>
|
||||
</div>
|
||||
`;
|
||||
</div>`;
|
||||
|
||||
const moduleName = 'app/dashboard';
|
||||
|
||||
|
@ -98,7 +96,7 @@ const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react'];
|
|||
|
||||
function mountDashboardApp(appBasePath: string, element: HTMLElement) {
|
||||
const mountpoint = document.createElement('div');
|
||||
mountpoint.setAttribute('style', 'height: 100%');
|
||||
mountpoint.setAttribute('class', 'kbnLocalApplicationWrapper');
|
||||
// eslint-disable-next-line
|
||||
mountpoint.innerHTML = mainTemplate(appBasePath);
|
||||
// bootstrap angular into detached element and attach it later to
|
||||
|
|
|
@ -26,6 +26,9 @@
|
|||
// Management styles
|
||||
@import './management/index';
|
||||
|
||||
// Local application mount wrapper styles
|
||||
@import 'local_application_service/index';
|
||||
|
||||
// Dashboard styles
|
||||
// MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS
|
||||
@import './dashboard/index';
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
@import 'local_application_service';
|
|
@ -0,0 +1,5 @@
|
|||
.kbnLocalApplicationWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
|
@ -56,7 +56,7 @@ export class LocalApplicationService {
|
|||
outerAngularWrapperRoute: true,
|
||||
reloadOnSearch: false,
|
||||
reloadOnUrl: false,
|
||||
template: `<div style="height:100%" id="${wrapperElementId}"></div>`,
|
||||
template: `<div class="kbnLocalApplicationWrapper" id="${wrapperElementId}"></div>`,
|
||||
controller($scope: IScope) {
|
||||
const element = document.getElementById(wrapperElementId)!;
|
||||
let unmountHandler: AppUnmount | null = null;
|
||||
|
|
|
@ -63,9 +63,8 @@ export const renderApp = async (
|
|||
return () => $injector.get('$rootScope').$destroy();
|
||||
};
|
||||
|
||||
const mainTemplate = (basePath: string) => `<div style="height: 100%">
|
||||
const mainTemplate = (basePath: string) => `<div ng-view class="kbnLocalApplicationWrapper">
|
||||
<base href="${basePath}" />
|
||||
<div ng-view style="height: 100%;"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
@ -75,7 +74,7 @@ const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react'];
|
|||
|
||||
function mountVisualizeApp(appBasePath: string, element: HTMLElement) {
|
||||
const mountpoint = document.createElement('div');
|
||||
mountpoint.setAttribute('style', 'height: 100%');
|
||||
mountpoint.setAttribute('class', 'kbnLocalApplicationWrapper');
|
||||
mountpoint.innerHTML = mainTemplate(appBasePath);
|
||||
// bootstrap angular into detached element and attach it later to
|
||||
// make angular-within-angular possible
|
||||
|
|
|
@ -96,9 +96,8 @@ export const renderApp = ({ appBasePath, element, ...deps }: GraphDependencies)
|
|||
};
|
||||
};
|
||||
|
||||
const mainTemplate = (basePath: string) => `<div style="height: 100%">
|
||||
const mainTemplate = (basePath: string) => `<div ng-view class="kbnLocalApplicationWrapper">
|
||||
<base href="${basePath}" />
|
||||
<div ng-view style="height: 100%; display:flex; justify-content: center;"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
@ -108,7 +107,7 @@ const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react', 'ui.boo
|
|||
|
||||
function mountGraphApp(appBasePath: string, element: HTMLElement) {
|
||||
const mountpoint = document.createElement('div');
|
||||
mountpoint.setAttribute('style', 'height: 100%');
|
||||
mountpoint.setAttribute('class', 'kbnLocalApplicationWrapper');
|
||||
// eslint-disable-next-line
|
||||
mountpoint.innerHTML = mainTemplate(appBasePath);
|
||||
// bootstrap angular into detached element and attach it later to
|
||||
|
|
Loading…
Reference in a new issue