diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 1bc1fd42792..945e3d825d8 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -15,6 +15,7 @@ interface Props { scrollTop?: number; setScrollTop: (event: any) => void; autoHeightMin?: number | string; + updateAfterMountMs?: number; } /** @@ -48,6 +49,20 @@ export class CustomScrollbar extends Component { componentDidMount() { this.updateScroll(); + + // this logic is to make scrollbar visible when content is added body after mount + if (this.props.updateAfterMountMs) { + setTimeout(() => this.updateAfterMount(), this.props.updateAfterMountMs); + } + } + + updateAfterMount() { + if (this.ref && this.ref.current) { + const scrollbar = this.ref.current as any; + if (scrollbar.update) { + scrollbar.update(); + } + } } componentDidUpdate() { diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index ce2d3fa74df..1a970d3edc0 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -272,6 +272,7 @@ export class DashboardPage extends PureComponent { autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop} + updateAfterMountMs={500} className="custom-scrollbar--page" > {editview && } diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap index 0e3720bada0..745bac2a20d 100644 --- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap +++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap @@ -113,6 +113,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1` hideTracksWhenNotNeeded={false} scrollTop={0} setScrollTop={[Function]} + updateAfterMountMs={500} >
{ {toolbarItems.map(item => this.renderButton(item))}
- +
{openView && this.renderOpenView(openView)}