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

[APM] Context Tabs jumping height fix (#32351)

Browse source 
* [APM] fixes #18144 by setting the container min-height to the tab with the largest rendered height

* [APM] moved HeightRetainer into its own shared component module
This commit is contained in:
Oliver Gupte 2019-03-04 10:42:37 -08:00 • committed by GitHub
parent 3b45c1167d
commit c7f5584358
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/TransactionPropertiesTable.tsx
View file

@ -18,6 +18,7 @@ import {
import { Transaction } from '../../../../../typings/es_schemas/Transaction';
import { IUrlParams } from '../../../../store/urlParams';
import { px, units } from '../../../../style/variables';
import { HeightRetainer } from '../../../shared/HeightRetainer';
import {
getPropertyTabNames,
PropertiesTable
@ -67,7 +68,7 @@ export function TransactionPropertiesTable({
const isTimelineTab = currentTab.key === timelineTab.key;
return (
<div>
<HeightRetainer>
<EuiTabs>
{tabs.map(({ key, label }) => {
return (
@ -108,6 +109,6 @@ export function TransactionPropertiesTable({
/>
</TableContainer>
)}
</div>
</HeightRetainer>
);
}

29
x-pack/plugins/apm/public/components/shared/HeightRetainer/index.tsx Normal file
View file

@ -0,0 +1,29 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useEffect, useRef } from 'react';
export const HeightRetainer: React.SFC = props => {
const containerElement = useRef<HTMLDivElement>(null);
const minHeight = useRef<number>(0);
useEffect(() => {
if (containerElement.current) {
const currentHeight = containerElement.current.clientHeight;
if (minHeight.current < currentHeight) {
minHeight.current = currentHeight;
}
}
});
return (
<div
{...props}
ref={containerElement}
style={{ minHeight: minHeight.current }}
/>
);
};