diff --git a/CHANGELOG.md b/CHANGELOG.md index e4b18e24370..f3d1dabacd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ - Fixed `EuiDataGrid`'s sort popover to behave properly on mobile screens ([#2979](https://github.com/elastic/eui/pull/2979)) - Fixed `EuiButton` and other textual components' disabled contrast ([#2874](https://github.com/elastic/eui/pull/2874)) +- Fixed z-index conflict with cell popovers in `EuiDataGrid` while in full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) +- Adjusted the header on `EuiDataGrid` to fix to the top within constrained containers and full screen mode ([#2959](https://github.com/elastic/eui/pull/2959)) **Breaking changes** diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index 62864d99fce..7d88c67a5f4 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -26,7 +26,7 @@ const columns = [ id: 'email', display: ( // This is an example of an icon next to a title that still respects text truncate - +
email
 diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss index 314140b5393..85a95cc8355 100644 --- a/src/components/datagrid/_data_grid.scss +++ b/src/components/datagrid/_data_grid.scss @@ -25,21 +25,20 @@ .euiDataGrid__content { @include euiScrollBar; - @include euiScrollBar; height: 100%; - overflow-y: auto; + overflow: auto; font-feature-settings: 'tnum' 1; // Tabular numbers - overflow-x: auto; scroll-padding: 0; max-width: 100%; width: 100%; + z-index: 2; // Sits above the pagination below it, but below the controls above it } .euiDataGrid__controls { background: $euiPageBackgroundColor; position: relative; - z-index: 2; + z-index: 3; // Needs to sit above the content blow that sits below it border: $euiBorderThin; padding: $euiSizeXS; flex-grow: 0; diff --git a/src/components/datagrid/_data_grid_column_resizer.scss b/src/components/datagrid/_data_grid_column_resizer.scss index f46bce3d618..09ab4287586 100644 --- a/src/components/datagrid/_data_grid_column_resizer.scss +++ b/src/components/datagrid/_data_grid_column_resizer.scss @@ -7,7 +7,7 @@ width: $euiSize; cursor: ew-resize; opacity: 0; - z-index: 2; + z-index: 2; // Needs to be a level above the cells themselves in case of overlaps // Center a vertical line within the button above &:after { diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 98b7cb2000e..3a8b038e936 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -34,8 +34,7 @@ margin-top: -1px; box-shadow: 0 0 0 2px $euiFocusRingColor; border-radius: 1px; - // Needed so it sits above potential striping in the next row - z-index: 2; + z-index: 2; // Needed so it sits above potential striping in the next row .euiDataGridRowCell__expandButton { margin-left: $euiDataGridCellPaddingM; diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss index 79702d44a64..658ec05c6ae 100644 --- a/src/components/datagrid/_data_grid_header_row.scss +++ b/src/components/datagrid/_data_grid_header_row.scss @@ -1,6 +1,10 @@ .euiDataGridHeader { display: inline-flex; min-width: 100%; // Needed to prevent wraps. Inline flex is tricky + z-index: 3; // Needs to sit above the content and focused cells + background: $euiColorLightestShade; + position: sticky; // In IE11 this does not work, but doesn't cause a break. + top: 0; } @include euiDataGridHeaderCell { @@ -30,8 +34,7 @@ border: 1px solid transparent; box-shadow: 0 0 0 2px $euiFocusRingColor; border-radius: 1px; - // Needed so it sits above the other rows - z-index: 2; + z-index: 2; // Needed so the focus ring sits above the other row below it. } // We only truncate if the cell is not a control column. @@ -47,6 +50,12 @@ // Header alternates // Often these need extra specificity because they need to gracefully clash with the border settings +@include euiDataGridStyles(bordersNone, bordersHorizontal) { + .euiDataGridHeader { + background: $euiColorEmptyShade; + } +} + @include euiDataGridStyles(headerUnderline) { @include euiDataGridHeaderCell { border-top: none; diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 598ff5786fc..d2a952bd1ca 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -8,6 +8,7 @@ import React, { Fragment, ReactChild, useMemo, + useRef, Dispatch, SetStateAction, } from 'react'; @@ -623,6 +624,18 @@ export const EuiDataGrid: FunctionComponent = props => { orderedVisibleColumns ); + const contentRef = useRef(null); + + // Because of a weird Chrome bug with position:sticky css items and focus, we force scrolling to the top + // if the item is in the first row. This prevents the cell from ever being under the sticky header. + useEffect(() => { + if (focusedCell !== undefined && focusedCell[1] === 0) { + if (contentRef.current != null) { + contentRef.current.scrollTop = 0; + } + } + }, [focusedCell]); + const classes = classNames( 'euiDataGrid', fontSizesToClassMap[gridStyles.fontSize!], @@ -842,6 +855,7 @@ export const EuiDataGrid: FunctionComponent = props => { /> ) : null}
diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 26f3f6140cf..a36b4e4a4d2 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -368,7 +368,7 @@ export class EuiDataGridCell extends Component< isOpen={this.state.popoverIsOpen} ownFocus panelClassName="euiDataGridRowCell__popover" - zIndex={2000} + zIndex={8001} display="block" closePopover={() => this.setState({ popoverIsOpen: false })} onTrapDeactivation={this.updateFocus}>