github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix safari layout issue in Visualize, Graph and Lens (#54694) (#54883)

Browse source
This commit is contained in:
Joe Reuter 2020-01-15 10:37:35 +01:00 • committed by GitHub
parent ab16f09b46
commit 40dfc2bdbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 17 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts
View file

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

3
src/legacy/core_plugins/kibana/public/index.scss
View file

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

1
src/legacy/core_plugins/kibana/public/local_application_service/_index.scss Normal file
View file

@ -0,0 +1 @@
@import 'local_application_service';

5
src/legacy/core_plugins/kibana/public/local_application_service/_local_application_service.scss Normal file
View file

@ -0,0 +1,5 @@
.kbnLocalApplicationWrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
}

2
src/legacy/core_plugins/kibana/public/local_application_service/local_application_service.ts
View file

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

5
src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts
View file

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

5
x-pack/legacy/plugins/graph/public/application.ts
View file

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