IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard: Fix panels overlapping Save Drawer (#76675)

Browse Source 
* Dashboard: Fix panels overlapping

* comments
This commit is contained in:
Josh Hunt 2023-10-17 10:11:52 +00:00 committed by GitHub
parent 2b8c6d66e1
commit 67e2430197
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

@ -153,6 +153,7 @@ export class DashboardGrid extends PureComponent<Props> {
const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing }); const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
// used to allow overflowing content to show on top of the next panel // used to allow overflowing content to show on top of the next panel
// requires parent create stacking context to prevent overlap with parent elements
const descIndex = this.props.dashboard.panels.length - panelElements.length; const descIndex = this.props.dashboard.panels.length - panelElements.length;
panelElements.push( panelElements.push(
@ -230,9 +231,18 @@ export class DashboardGrid extends PureComponent<Props> {
* We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer * We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
* properly working. For more information go here: * properly working. For more information go here:
* https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#can-i-use-autosizer-within-a-flex-container * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#can-i-use-autosizer-within-a-flex-container
*
* pos: rel + z-index is required to create a new stacking context to contain the escalating z-indexes of the panels
*/ */
return ( return (
<div style={{ flex: '1 1 auto', display: this.props.editPanel ? 'none' : undefined }}> <div
style={{
flex: '1 1 auto',
position: 'relative',
zIndex: 1,
display: this.props.editPanel ? 'none' : undefined,
}}
>
<AutoSizer disableHeight> <AutoSizer disableHeight>
{({ width }) => { {({ width }) => {
if (width === 0) { if (width === 0) {