[data grid] MUI: useResizeContainer - The parent DOM element of the data grid has an empty width. #7215
Comments
Mattc1221
added
status: waiting for maintainer
MBilalShafi
added
the
component: data grid
m4theushw
removed
the
status: waiting for maintainer
|
Dynamic column width is for when you don't know the width of the content beforehand but knows that maximum width of the container = possible horizontal scrollbar. It seems that in your application you want dynamic column width but also to have the width of the grid equals to the sum of all columns = no horizontal scrollbar. I'm correct? If yes, then it more or less the behavior of |
m4theushw
changed the title
|
You are correct. However, I have also tried removing that logic and setting a fixed width in the parent component of the DataGrid and am still getting this error message. |
|
In my case, I had this issue when I was passing a Before : initialState={{
sorting: {
sortModel: [
{ field: 'account', sort: 'asc' },
{ field: 'counterpart', sort: 'asc' },
{ field: 'date', sort: 'asc' },
],
},
}}After ( initialState={{
sorting: {
sortModel: initialSortModel && [initialSortModel],
},
}} |
the problem can be the testing environment and the way how MUI detects it — see the environmentOptions: {
happyDOM: {
width: 1280,
height: 1024,
settings: {
// @see https://github.com/capricorn86/happy-dom/issues/482#issuecomment-1713338378
navigator: {
userAgent: "Mozilla/5.0 HappyDOM/jsdom/compatible", // <— this
},
},
},
}, |
|
For the record, having the grid work in jsdom/happy-dom is somewhat hard, those are completely emulated environments that lack some standard browser APIs and features. Those are fine for simple testing, but for real production testing I would recommend playwright or any other headless browser runner. @Mattc1221 Could you confirm if this issue is still relevant to you? If so, we would need a clear reproduction case to assist with the error. |
|
The issue has been inactive for 7 days and has been automatically closed. |
Order ID 💳
51377
Duplicates
Latest version
The problem in depth 🔍
In our application, our DataGridPro component works well but I am getting the following error for every DataGrid component when I empty cache and hard reload the page:
If I'm understanding correctly, the issue is that the container around DataGrid needs some set size as the DataGrid component expands to fill that size. In my case, we have a vertical scrollable container with many DataGrid components inside. The width for each DataGrid component is based on its content. Following this #1241 (comment) comment to implement dynamic column widths. We calculate the width of each column based on content length (max of 500px), sum all column widths together and then set the width property of the container around the DataGrid component to that summed width. We also have a table header that has a dynamic min width and we want the DataGrids min width to be bound by that as well
Note, I have also tried inserting the example code from your doc's site (here) into the project and the issue was still present.
This is also a very tricky issue to reproduce in a sandbox. I will keep trying to create a repro, but for now, I'll add the DOM tree.
DOM tree
Table Styling
Your environment 🌎
`npx @mui/envinfo`
System:
- OS: macOS 12.2.1
- CPU: (10) arm64 Apple M1 Max
- Memory: 676.78 MB / 32.00 GB
- Shell: 3.2.57 - /bin/bash
Binaries:
- Node: 16.15.1 - /usr/local/bin/node
- npm: 8.1.2 - /usr/local/bin/npm
Managers:
- Homebrew: 3.6.6 - /usr/local/bin/brew
- pip3: 22.3.1 - ~/.pyenv/shims/pip3
- RubyGems: 3.0.3.1 - /usr/bin/gem
Utilities:
- Make: 3.81 - /usr/bin/make
- GCC: 12.3. - /usr/bin/gcc
- Git: 2.37.0 - /usr/local/bin/git
- Clang: 13.0.0 - /usr/bin/clang
Servers:
- Apache: 2.4.51 - /usr/sbin/apachectl
Virtualization:
- Docker: 20.10.17 - /usr/local/bin/docker
IDEs:
- Nano: 2.0.6 - /usr/bin/nano
- Vim: 8.2 - /usr/bin/vim
- Xcode: /undefined - /usr/bin/xcodebuild
Languages:
- Bash: 3.2.57 - /bin/bash
- Go: 1.19.1 - /usr/local/go/bin/go
- Perl: 5.30.3 - /usr/bin/perl
- Python: 3.8.13 - /Users/mattc1221/.pyenv/shims/python
- Python3: 3.8.13 - /Users/mattc1221/.pyenv/shims/python3
- R: 4.2.1 - /usr/local/bin/R
- Ruby: 2.6.8 - /usr/bin/ruby
Databases:
- PostgreSQL: 14.4 - /usr/local/bin/postgres
- SQLite: 3.36.0 - /usr/bin/sqlite3
Browsers:
- Chrome: 108.0.5359.98
- Safari: 15.3
The text was updated successfully, but these errors were encountered: