Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiDataGrid] Grid grows to infinite height in flex container if height not provided #7769

Open
i-a-n opened this issue May 17, 2024 · 0 comments

Comments

@i-a-n
Copy link
Contributor

i-a-n commented May 17, 2024

Describe the bug
Using an EuiDataGrid within a <EuiFlexGroup direction='column'> with a sibling component will cause a feedback loop of some kind whereby the DataGrid will grow infinitely.

datagrid-height.mp4

Impact and severity
A component tree as simple as this completely breaks the entire page (pseudocode):

<EuiFlexGroup direction="column">
  <EuiFlexItem>
    <EuiPanel>
      <EuiSearchBar />
      <EuiDataGrid />
    </EuiPanel>
  </EuiFlexItem>
</EuiFlexGroup>

The fix is to simply specify a height on the Data Grid:

<EuiFlexGroup direction="column">
  <EuiFlexItem>
    <EuiPanel>
      <EuiSearchBar />
-     <EuiDataGrid />
+     <EuiDataGrid height="auto" />
    </EuiPanel>
  </EuiFlexItem>
</EuiFlexGroup>

You could also simply wrap the Data Grid in a non-flex container:

<EuiFlexGroup direction="column">
  <EuiFlexItem>
    <EuiPanel>
      <EuiSearchBar />
+      <div>
          <EuiDataGrid />
+      </div>
    </EuiPanel>
  </EuiFlexItem>
</EuiFlexGroup>

Environment and versions

  • EUI version: latest
  • React version: latest
  • Browser: Chrome (at least)
  • Operating System: all

Minimum reproducible sandbox

Additional context
If the bug is "too deep" to fix, as suggested in the thread, it maybe be useful to require a height prop,or at least call this out in the docs. Thanks for your time!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants