Quirky layout with TextField and DataGrid inside Grid inside Dialog
@siriwatknp is already working on this.
Since Sep 9, 2024.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: (required)
https://codesandbox.io/p/sandbox/quirky-layout-lm4ktv?file=%2Fsrc%2FApp.tsx%3A15%2C1-16%2C1
Steps:
- be sure to run in a wide space, with some width to spare, as if the viewport is narrow the effect will not be evident.
- click "show textfield"
Current behavior
the grid automatically expands iteratively (not my code, lib's) until it reaches the limit of the dialog.
This doesn't happen if only the textfield or only the datagrid are displayed.
The behavior is triggered the moment that both are visible.
Expected behavior
Width of the dialog should be max(width_of_textfield, width_of_datagrid)
Context
i have dynamic forms inside dialogs.
i don't want to workaround capping the dialog's width, because the content is dynamically decided and i may have other components that need more space, so the dialog will widen legitimately.
Your environment
can't run npx as it's codesandbox, but this is on my machine
npx @mui/envinfo
```
System:
OS: macOS 14.6.1
Binaries:
Node: 18.17.1 - /usr/local/bin/node
npm: 9.6.7 - /usr/local/bin/npm
pnpm: 8.14.3 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: Not Found
Edge: 128.0.2739.67
Safari: 17.6
npmPackages:
@emotion/react: 11.11.3
@emotion/styled: 11.11.0
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.19
@mui/icons-material: 5.15.19
@mui/lab: 5.0.0-alpha.170
@mui/material: 5.15.19
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-date-pickers: 6.20.1
@mui/x-tree-view: 6.17.0
@types/react: 18.2.48
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.5
</details>
**Search keywords**: dialog grid datagridContributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.