I want to create a visual layout according to this picture:
Code:
<>
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Grid className={classes1.color}
container
direction="column"
justifyContent="flex-start"
alignItems="center"
>
<Grid item>
<Box m={2}>
item link 1
</Box>
</Grid>
<Grid item>
<Box m={2}>
item link 2
</Box>
</Grid>
<Grid item>
<Box m={2}>
item link 3
</Box>
</Grid>
<Grid item>
<Box m={2}>
item link 4
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid className={classes2.color}
container
direction="column"
justifyContent="space-around"
alignItems="center"
>
<Grid item>
<Box m={10}>
item 11
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 11
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 13
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 14
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 15
</Box>
</Grid>
<Grid item>
<Box m={10}>
item 16
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid className={classes3.color}
container
direction="column"
justifyContent="space-around"
alignItems="center"
>
<Grid item>
<Box m={15}>
item area 1
</Box>
</Grid>
<Grid item>
<Box m={15}>
item area 2
</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</>
Full code:
https://stackblitz.com/edit/react-ts-lhrv91?file=Hello.tsx
The issues that I can't solve are how I can add vertical scrollbar for the second column(item 1-6).
I also want to autosize item 'area 1' and 'item area 2' to fit the rest of the horizontal area and add vertical scrollbar.
for using vertical scrollbar in second column you can separate the parent <Grid container> to three Grid and then use style={{ height: "100%", overflow: "auto" }} inside middle <Grid container>
base on material-ui documentation at "xl" and "xs" props, you can use xs={12} in <Grid item xs={12}> to fit the rest of the horizontal area
check this codesandbox that look like your code
Related
I was trying to create layout with top panel (2*2 grid) and bottom (rows) panel (1 cell) with the following Material UI code:
<Grid container xs={12}>
<Grid container item xs={12}>
<Grid container item xs={12} md={6}>
<Grid container item xs={12} md={6}>
1st column, 1st row
</Grid>
<Grid container item xs={12} md={6}>
1st column, 2nd row
</Grid>
</Grid>
<Grid container item xs={12} md={6}>
<Grid container item xs={12} md={6}>
2nd column, 1st row
</Grid>
<Grid container item xs={12} md={6}>
2nd column, 2nd row
</Grid>
</Grid>
</Grid>
<Grid container item>
Rows
</Grid>
</Grid>
I expected that the grid system would automatically detect that 1st-column/1st-row and 1st-column/2nd-row each took 6 columns and that the parent (1st-column) was only 6 columns wide and that is why the 1st-column/1st-row and 1st-column/2nd-row would be put in the separate rows automatically (one under another). But that didn't happen. Why it didn't happen?
I had to specify the direction explicitly to achieve the intended placement (2*2 cells):
<Grid container xs={12}>
<Grid container item xs={12}>
<Grid container item xs={12} md={6} direction="column">
<Grid container item xs={12} md={6}>
1st column, 1st row
</Grid>
<Grid container item xs={12} md={6}>
1st column, 2nd row
</Grid>
</Grid>
<Grid container item xs={12} md={6} direction="column">
<Grid container item xs={12} md={6}>
2nd column, 1st row
</Grid>
<Grid container item xs={12} md={6}>
2nd column, 2nd row
</Grid>
</Grid>
</Grid>
<Grid container item>
Rows
</Grid>
</Grid>
This code worked as expected, but I feel that the use of explicit specification of the direction is not flexible.
How to correct the first block to arrive at the 2*2 placement in the first (upper) item?
Additional Info: The following code (without md={6} for "cell" <div>) solved my problem without introcution direction. I am confused - whether the breakpoints (12 column convention) starts at each container separately? My guess is that 2 6-column containers should allow 6-column wide childrens to order themselves into new lines automatically.
<Grid container xs={12}>
<Grid container item xs={12}>
<Grid container item xs={12} md={6}>
<Grid container item xs={12}>
1st column, 1st row
</Grid>
<Grid container item xs={12}>
1st column, 2nd row
</Grid>
</Grid>
<Grid container item xs={12} md={6}>
<Grid container item xs={12}>
2nd column, 1st row
</Grid>
<Grid container item xs={12}>
2nd column, 2nd row
</Grid>
</Grid>
</Grid>
<Grid container item>
Rows
</Grid>
</Grid>
In the following image the blue block is rendered under the red and green blocks. I would like the blue block to render directly underneath the red block.
Is there a way to achieve this with MUI grid?
import * as React from "react";
import Box from "#mui/material/Box";
import Grid from "#mui/material/Grid";
export default function BasicList() {
return (
<Box>
<Grid container>
<Grid item alignContent="center" justifyContent="center" md={6}>
<Box style={{backgroundColor:"red"}} height={200}>
MD = 6 Height = 200
</Box>
</Grid>
<Grid item md={6}>
<Box style={{backgroundColor:"green"}} height={600}>
MD = 6 Height = 600
</Box>
</Grid>
<Grid item md={6}>
<Box style={{backgroundColor:"blue"}} height={200}>
MD = 6 Height = 200
</Box>
</Grid>
</Grid>
</Box>
);
}
Sandbox: link
How can I make a modal warning user to save changes (in the Grid) before they leave site? Here is my example code (just an example!)
return (
<Grid container direction="column" alignItems="center">
<Grid item>
<TextField
fullWidth
variant="outlined"
label="First Name"
size="small"
value={fname}
onChange={e => handleChange(e.target.value, 'fname')}
/>
</Grid>
<Grid item>
<TextField
fullWidth
variant="outlined"
label="Last Name"
size="small"
value={lname}
onChange={e => handleChange(e.target.value, 'lname')}
/>
</Grid>
);
My primary objective is an edit form with two columns. I understand I can do this with a custom form, but I'm wondering if there's an easier way to do it using the existing SimpleForm or (better yet) TabbedForm.
I'm able to get the data to display in two columns using Grid or Box, but it's all crammed into a small column on the left side, instead of using the full width. I've tried playing with fullWidth, changing the component, etc. but I can't get it to work. Any help would be very much appreciated!
Updating with current code:
<SimpleForm >
<Grid container spacing={1}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Old</Typography>
<TextField source="id" />
<TextInput source="foo" fullWidth />
<TextInput source="bar" fullWidth />
</Grid>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>New</Typography>
<TextField source="id" fullWidth />
<TextInput source="newFoo" fullWidth />
<TextInput source="newBar" fullWidth />
</Grid>
</Grid>
</SimpleForm>
Try this add custom style to grid to take full width
<SimpleForm >
<Grid container spacing={1} style={{ width: "100%" }}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Old</Typography>
<TextField source="id" />
<TextInput source="foo" fullWidth />
<TextInput source="bar" fullWidth />
</Grid>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>New</Typography>
<TextField source="id" fullWidth />
<TextInput source="newFoo" fullWidth />
<TextInput source="newBar" fullWidth />
</Grid>
</Grid>
</SimpleForm>
I'm trying to produce the following layout using the Material-UI grid... and have only managed so far to expose just how little I understand the whole thing.
What I'm looking to create is this:
Which I think equates to this design:
So my thinking was this structure...
<Grid container xs={12} spacing={3}>
<Grid item xs={12} >
<Paper className={classes.paper}>
Top Bar
</Paper>
</Grid>
<Grid container xs={12} spacing={3}>
<Grid container spacing={3}>
<Paper className={classes.paper}>
<Grid item xs={4}>
Main Field
</Grid>
<Grid container xs={8}>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 1
</Grid>
<Grid item xs={4}>
field 2 row 1
</Grid>
</Grid>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 2
</Grid>
<Grid item xs={4}>
field 2 row 2
</Grid>
</Grid>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 3
</Grid>
<Grid item xs={4}>
field 2 row 3
</Grid>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
... which was nothing like it. I can't get it to show at full width to start with.
I've tried adding width={1} props to various elements to no avail. Can some one point me in the right direction, or better yet is there some dev tool I'm missing for composing 'layouts' with Material-UI grid, or something similar?
I managed to create your layout by starting to use the Grid references on the complex grid section of the documentation.
By combining the row and column directions as props on the innermost Grids and putting inside the child Grids outer Paper components as placeholders, we could achieve what you are looking for.
The code would look something like this:
export default function ComplexGrid() {
return (
<div>
<Paper>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper>xs=12</Paper>
</Grid>
<Grid item xs={12} container>
<Grid item xs container direction="column" spacing={3}>
<Grid item xs={4}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={8}>
<Paper>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
</Paper>
</div>
);
}
Here is a codesandbox with a working example of the code along with some not so good styles for the paper, but to serve only as a proof of concept. Then of course you can change the margins, paddings, sizes and anything else to your needs.