search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.55k stars 1.33k forks source link

[data grid] DataGrid does not autoresize width correctly when nested with a `Drawer` style component #15439

Closed rdougan closed 3 days ago

rdougan commented 1 week ago

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/p/sandbox/nice-napier-76g87r?from-embed=&workspaceId=d9cbb423-51f0-4df3-be6d-b113d5e3bb6c
  2. Resize window

Current behavior

The drawer is not visible unless you make the window large enough for DataGrid full width + drawer. If you resize the window smaller, the drawer hides. If you

Expected behavior

Drawer should take up full width of the container.

Context

I first noticed this as my app has a Drawer component with DataGrid's sometimes appearing on screen with it. If I resize, I would like to show the drawer on the left, while showing the full width DataGrid.

Your environment

OSX Chrome & Safari

Search keywords: datagrid width autoresize Order ID: 86320

michelengelen commented 6 days ago

This is a CSS flexbox related problem, not a problem with the data grid. Top force the drawer to a specific width you can use flex: 1, minWidth: 240.

Is this what you are looking for?

rdougan commented 6 days ago

@michelengelen I've updated the codesandbox to remove width and add minWidth and flex and the data grid does not follow the size of the container. If you remove the data grid, the container (red) resizes correctly.

https://codesandbox.io/p/sandbox/nice-napier-76g87r?from-embed=&workspaceId=d9cbb423-51f0-4df3-be6d-b113d5e3bb6c

rdougan commented 3 days ago

I've gotten around it by wrapping the grid in a position: absolute container:

<Box sx={{position: 'relative'}}>
    <Box sx={{inset: 0, position: 'absolute'}}>
        {...grid}
    </Box>
</Box>

I do believe this is still a layout bug with DataGrid.

rdougan commented 3 days ago

And another follow up...

The issue can be resolved by adding a minWidth: 0 to the parent container of the data grid.

michelengelen commented 3 days ago

I tend to disagree. It is not a layout bug of the data grid.

As mentioned before you are encountering a limitation of the flex-box property (and the css grid as well).

A flex item cannot be smaller than the size of its content along the main axis.

To be a bit clearer about this: The flex-child will always try to shrink to fit the size of the content, since min-width: auto is set on it. That's why setting min-width: 0 solves this problem.

Very good answer about this on StackOverflow

michelengelen commented 3 days ago

Its great though that you could fix your problem. I will close this now! Thanks again for taking the time and opening an issue here!

github-actions[bot] commented 3 days ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @rdougan How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.