You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Within EuiFlexItem, the data grid only adapts to the container width if the flex item has a hard coded width. If the width is not set or a percentage, data grid will outgrow it.
Expected behavior: The data grid should not outgrow the parent container.
In this Kibana PoC I worked around it by tracking the width of the parent element and setting it via JavaScript but it's unfortunate that that's needed.
The text was updated successfully, but these errors were encountered:
You'll need a maxwidth for the EuiFlexItem that contains the grid. EuiDataGrid requires a container with some manner of limits for the scrolling to know when to kick in. Please close if this fixes your issue.
Thanks for the update! In our case the left container has a fixed width and we want the data grid to use up the available rest of the width. So first I thought that's then an edge case we cannot cover with pure CSS. But calc() to the rescue! If I do a max-width: calc(100% - 480px) where 480px is the fixed width of the left container, the data grid uses up the available space. Thanks for investigating, closing this one.
The data grid will overflow in flex structures:
Within
EuiFlexItem
, the data grid only adapts to the container width if the flex item has a hard coded width. If the width is not set or a percentage, data grid will outgrow it.Expected behavior: The data grid should not outgrow the parent container.
See this codesandbox to reproduce the issue: https://codesandbox.io/s/euidatagrid-1-6yedq?fontsize=14&hidenavigation=1&theme=dark
In this Kibana PoC I worked around it by tracking the width of the parent element and setting it via JavaScript but it's unfortunate that that's needed.
The text was updated successfully, but these errors were encountered: