'MUI DataGridPro useResizeContainer - The parent of the grid has an empty width
I am begging you to help me because I have been looking for an answer for 3 days, and I can't fix this.
Problem: MUI: useResizeContainer - The parent of the grid has an empty width. You need to make sure the container has an intrinsic width. The grid displays with a width of 0px.
Description Here is a screenshot of my table, it placed in MUI Side Drawer, and how can we see there is no 0px width or something related to it as I was inspected all CSS that I can find, but googling and MUI documentation is not provided me an answer and I see that I am not alone with this problem
Component
<GridContainer>
<StyledDataGridPro
headerHeight={40}
rowHeight={56}
disableSelectionOnClick
autoHeight
disableColumnMenu
disableChildrenSorting
disableColumnResize
disableColumnReorder
hideFooterRowCount
rows={rows}
columns={columns}
/>
</GridContainer>
Container styles:
export const GridContainer = styled(Box)(({ theme }) => ({
width: '535px',
marginTop: '24px',
'& .actions': {
padding: '0 !important'
},
'& .MuiDataGrid-footerContainer': {
display: 'none'
}
}));
Grid styles:
export const StyledDataGridPro = styled(DataGridPro)(({ theme }) => ({
border: 'none',
'& .MuiDataGrid-row': {
cursor: 'pointer'
},
'& .MuiDataGrid-columnSeparator': {
visibility: 'hidden'
},
'& .MuiDataGrid-columnHeaders, .MuiDataGrid-columnHeader': {
backgroundColor: theme.palette.custom.cultured
},
}));
Solution 1:[1]
AT LEAST!!! the problem is that gridPro is rendered in Drawer that is closed at the same time, so currently I have a 0px width of the parent that is not rendered currently, OMG so stupid mistake
So to fix it I made it conditionally rendered, so I passed in the 'isOpen' state of the whole Drawer - just that simple
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Igor S. |
