I need help setting the height of a Grid Item to occupy all available space in a MUI dialog.
In the image below, I am trying to make the Left Side Panel, Main section, and Right Panel extend to fill the orange-colored dialog space.
Here is the code on Codesandbox that I have been working on.
https://codesandbox.io/p/sandbox/dialog-with-grid-nx5kkc?file=%2Fdemo.js%3A71%2C78
UPDATE: I made changes to the layout as shown below, but setting an xs value for the 2nd or 3rd part doesn't seem to work properly.
https://codesandbox.io/p/sandbox/dialog-with-grid-new-xhrm69?file=%2Fdemo.js%3A75%2C36
import * as React from "react";
import Button from "@mui/material/Button";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Dialog from "@mui/material/Dialog";
import Grid from "@mui/material/Unstable_Grid2";
import Stack from "@mui/material/Stack";
import Divider from "@mui/material/Divider";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
function ConfirmationDialogRaw(props) {
const { onClose, ...other } = props;
return (
<Dialog
maxWidth="96%"
PaperProps={{
sx: {
width: "96%",
height: "100%",
},
}}
onClose={onClose}
{...other}
>
<DialogContent>
<Container sx={{ height: "100%" }}>
<Box sx={{ height: "100%" }}>
<Grid container direction="row" spacing={2} sx={{ height: "100%" }}>
{/* ------------------------ */}
<Grid item xs={10}>
<Grid
container
direction="column"
sx={{ p: 0, height: "100%" }}
xs
>
{/* ----- */}
<Grid item sx={{ backgroundColor: "yellow" }}>
<Stack
sx={{
height: "80px",
border: "1px solid black",
fontSize: 30,
textAlign: "center",
}}
>
1
</Stack>
</Grid>
{/* ----- */}
<Grid xs item sx={{ backgroundColor: "red", height: "100%" }}>
<Grid
container
direction="row"
spacing={0}
sx={{ height: "100%" }}
xs
>
<Grid item xs>
<Stack
sx={{
height: "100%",
border: "1px solid black",
fontSize: 30,
textAlign: "center",
}}
>
2
</Stack>
</Grid>
<Grid item xs>
<Stack
sx={{
height: "100%",
border: "1px solid black",
fontSize: 30,
textAlign: "center",
}}
>
3
</Stack>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
{/* --------------------- */}
<Grid item xs={2}>
<Stack
sx={{
height: "100%",
minHeight: 150,
border: "1px solid black",
fontSize: 30,
textAlign: "center",
}}
>
4
</Stack>
</Grid>
</Grid>
</Box>
</Container>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={onClose}>
Cancel
</Button>
<Button onClick={onClose}>Ok</Button>
</DialogActions>
</Dialog>
);
}
export default function Demo() {
const [open, setOpen] = React.useState(false);
return (
<>
<Button variant="contained" onClick={() => setOpen(true)}>
Open dialog
</Button>
<ConfirmationDialogRaw
id="ringtone-menu"
keepMounted
open={open}
onClose={() => setOpen(false)}
/>
</>
);
}