Fix datagrid not fitting into containers (#3894)

* Fix datagrid not fitting into containers * cl
elastic · Aug 12, 2020 · 5ebf353 · 5ebf353
1 parent 7572226
commit 5ebf353
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 - Fixed `EuiFacetGroup` container expansion due to negative margin value ([#3871](https://github.com/elastic/eui/pull/3871))
 - Fixed `EuiComboBox` delimeter-separated option creation and empty state prompt text ([#3841](https://github.com/elastic/eui/pull/3841))
+- Fixed `EuiDataGrid` not properly resizing within a fixed height container ([#3894](https://github.com/elastic/eui/pull/3894))
 
 **Breaking changes**
 

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -177,6 +177,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
@@ -714,6 +715,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
@@ -1575,6 +1577,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div
@@ -2111,6 +2114,7 @@ Array [
     tabindex="-1"
   />,
   <div
+    class="euiDataGrid__focusWrap"
     data-focus-lock-disabled="disabled"
   >
     <div

diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
@@ -113,3 +113,7 @@
   padding: $euiSizeS;
   margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
 }
+
+.euiDataGrid__focusWrap {
+  height: 100%;
+}
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
@@ -948,7 +948,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
                 <DataGridContext.Provider value={datagridContext}>
                   <EuiFocusTrap
                     disabled={!isFullScreen}
-                    style={{ height: '100%' }}>
+                    className="euiDataGrid__focusWrap">
                     <div
                       className={classes}
                       onKeyDown={handleGridKeyDown}