I am rendering four different graphs. I had them appearing to be in the same height and width, but I had changed one of the grids to include 2 graphs instead of 1. I had the grid expand in height for it to fit in the graph. But now the other graphs have this big empty space at the bottom of the grid. How would I be able to expand my graph so it could take care of all the grid.
What I tried is using a style{{height: '100%'}}, but I guess that only takes care of the grid, not the graph.
<Grid container spacing={2}>
<Grid item xs={4}>
<Graph1/>
</Grid>
<Grid item xs={4} style={{height: '100%'}}>
<Graph2/>
</Grid>
<Grid item xs={4}>
<Graph3/>
</Grid>
<Grid item xs={4}>
<Graph4/>
</Grid>
</Grid>
what I have in my Graph2-4 is the following
<Grid container spacing={2}>
<Grid item xs={12}>
<MyGraph/>
</Grid>
<Grid item xs={12}/>
</Grid>
Not to sure how to expand the content to take care of all the grid
You were half-way there I think. The parent grid should be 100vh and each graph's parent grid 100%
<Grid container spacing={2} style={{ height: '100vh' }}>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph1 />
</Grid>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph2 />
</Grid>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph3 />
</Grid>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph4 />
</Grid>
</Grid>
Also for Graph2-4, I believe the 2nd <Grid item xs={12}/> can be removed, unless you saw a purpose.
<Grid container spacing={2}>
<Grid item xs={12} style={{ height: '100%' }}>
<MyGraph />
</Grid>
</Grid>
Related
I am trying to use MUI Card in Grid layout
<Grid container spacing={5} alignContent="center" alignItems="center" justifyContent="center" columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={4} md={6} alignItems="center">
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
</Grid>
But the problem is its not center aligns with in each grid item. I have added border for each item
What I did wrong?
Also as you can see the grid overlap on the title above
I am currently trying to create a layout where a box is divided into multiple sections, where each is on top of another. The middle grid item contains a List which most likely would become so long that it needs to be scrolled up and down. Because I want to divide this area into sections, I used Grid component to create this. This is the code I used to test it:
return (
<Grid container spacing={0}>
<Grid item xs={2}>
<Grid container spacing={2} direction='column'>
<Grid item xs={3}>
<Card>
ABCD
</Card>
</Grid>
<Grid item xs={6}>
<List sx={{overflow: 'auto'}}>
{displayRows()}
</List>
</Grid>
<Grid item xs={3}>
<Card>
IJKL
</Card>
</Grid>
</Grid>
</Grid>
<Divider orientation='vertical' flexItem/>
</Grid>
);
Where displayRow() returns an array of ListItems.
Problem is when the list size changed. When it is too long, it messes with other components. When the list is too small, the card doesn't extend all the way until the next grid item (as in, the middle card should be long enough to touch the card that says "IJKL"). How can I make it so that the middle area is always as big as it can get, but only within the given space?
Found out that spamming height="100%" works. It works, and it doesn't involve hardcoding heights into each elements so I suppose this is a valid solution.
<Grid item xs={3} height='100%'>
<Grid container spacing={1} height='100%' direction='column'>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
<Grid item xs={3}>
<Card sx={{height: '100%', width: '100%'}}>123</Card>
</Grid>
</Grid>
</Grid>
Edit: Apparently, for a grid item that contains a list, it needs to have height of 0 for it to work as expected. Weird.
<Grid item xs={10} height='0'>
<List sx={{ overflow: 'auto', width: '100%', padding: 0, height: '100%'}}>
{displayRows()}
</List>
</Grid>
I am trying to make a grid of buttons aligned in specific order, but I am having difficulties with making both buttons on the same row:
Expected:
Instead, row2 (the two columns in red), appear in a column direction (the second column goes bellow the first columnt, screenshot: http://prntscr.com/x4amxf) and not in a row direction like I am expecting them to be.
Here is my grid:
<Grid container direction="column"> // this is another container that wraps everything, not in the picture above
<Grid item container direction="row"></Grid> // another row of stuff, not related, works just fine
// picture represents this grid
<Grid item container direction="row" spacing={1}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
</Grid>
</Grid>
</Grid>
I have tried to increase xs to 2 to see if its a size issue, but it just stretched the items.
And the actual code (but the structure above represents the same):
<Grid container direction="column">
<Grid item container>
</Grid>
<Grid item container direction="row" spacing={1}>
<Grid item>
<AddPrice open={open} handleClosePopup={handleClose} item={item} />
<IconButton variant="contained" onClick={handleClose}>
<AddCircleOutlineIcon color="primary" style={{ fontSize: 40, marginRight: 5 }} />
<Typography>Цена</Typography>
</IconButton>
</Grid>
{item.prices.map(({ price, quantity }) => (
<React.Fragment key={`itemPrice1${price}`}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item>
<Button>
<Grid item direction="column" container>
<Grid item>
<Typography variant="button">{price} лв.</Typography>
</Grid>
<Grid item>
<Typography variant="button">
{quantity.available} {item.quantity.type}.
</Typography>
</Grid>
</Grid>
</Button>
</Grid>
</Grid>
{editing && (
<Grid item container direction="column">
<Grid item>
<IconButton style={{ border: "1px solid #f44336" }} variant="contained" color="secondary">
<DeleteForever color="secondary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
<Grid item>
<IconButton style={{ border: "1px solid #3f51b5" }}>
<EditIcon color="primary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
</Grid>
)}
</Grid>
</React.Fragment>
))}
</Grid>
<Grid item container></Grid>
</Grid>
Basically, the editing buttons, should appear on the right of the price buttons.
Sandbox: https://codesandbox.io/s/material-demo-forked-6v50s?file=/demo.js
If I understood the task correctly, you have to refactor your layout like this:
<Grid container direction="column">
<Grid item container direciton="row">
Row1
</Grid>
<Grid align="center" direction="row" container>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>BR</Grid>
<Grid item>TXT</Grid>
</Grid>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>EDIT</Grid>
<Grid item>DELETE</Grid>
</Grid>
</Grid>
</Grid>
Please, check out the example
Using material UI for the styling.
Is it possible to place an HTML element or Typography element to the left side of a Grid and have it still be on the same line?
Here is a small snippet of the code.
return (
<Wrapper>
<form>
<Grid container spacing={1}>
<Grid item xsn={8}>
<SideLabel>{labels.dates}</SideLabel>
</Grid>
<Grid item xsn={22}>
<DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
</Grid>
<Grid item xsn={23}>
<DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
</Grid>
<Grid item xsn={47} />
</Grid>
</form>
</Wrapper>
);
Lets say for example, I want to add a typography element and have it shown on the same line as grid items serviceDateOne and serviceDateTwo, what would that look like? I've tried
return (
<Wrapper>
<form>
<Typography>TEST</Typography>
<Grid container spacing={1}>
<Grid item xsn={8}>
<SideLabel>{labels.dates}</SideLabel>
</Grid>
<Grid item xsn={22}>
<DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
</Grid>
<Grid item xsn={23}>
<DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
</Grid>
<Grid item xsn={47} />
</Grid>
</form>
</Wrapper>
);
Add the Typography element is displayed above the line where serviceDateOne and serviceDateTwo are. BTW, the component is just a styled div. The element is included as part of the Grid, what i'm trying to achieve is to place that element outside of the grid and to the left of the form, acting like side labels for that row, and only have the grid items as part of the grid
Grid is using for the seperation, so just make the seperation at the top level.
return (
<>
<Grid container spacing={1}>
<Grid item xs={3} style={{ backgroundColor: "lightgray" }}>
<Typography>TEST</Typography>
</Grid>
<Grid item xs={9}>
XXX
<Grid container spacing={1}>
<Grid item xs={12}>
YYY
</Grid>
<Grid item xs={6}>
ZZ
</Grid>
<Grid item xs={6}>
ZZ
</Grid>
</Grid>
</Grid>
</Grid>
</>
);
Update
Show two child in one line: ref QA
return (
<div style={{ display: "flex" }}>
<Typography style={{ backgroundColor: "lightgray", width: 100 }}>
TEST
</Typography>
<Grid container spacing={1} style={{ backgroundColor: "gray" }}>
<Grid item xs={12}>
The following grid structure in my Material-UI collapsible is my desired layout:
Desired grid layout
I already tried changing the layout by playing with the flex-direction.
https://codesandbox.io/s/epic-nobel-ov48j
When I click on the checkboxes, the last checkbox tends to "jump" from its position away and stacks itself under the other two ones. At the moment I can't find the reason why. You can see the result of this behaviour on this picture:
Undesired grid layout
On smaller screens this behaviour would be okay but especially on larger screens I want the two columns layout where the first one contains two checkboxes and the second contains the third one.
Try this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>Exmaple text</Typography>
<Grid container justify="space-between" direction="row">
<Grid container item justify="space-between" xs={6}>
<Grid container item style={{ alignItems: "center" }} direction="row">
<Grid item xs={6}>Text Supervisor</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid container item xs={6} style={{ alignContent: "center" }} direction="row">
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
</Grid>
</ExpansionPanelDetails>
I'm rather new to this js / material-ui / react thing, so you probably might improve it even further.
#Radosław Cybulski: Thank you for your help. With your code and some modifications I was able to get it to work. You don't have to specify direction="row" because it is the default settting.
Now it looks like this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>
Example text
</Typography>
<Grid container justify="space-between">
<Grid container item xs={6} md={3}>
<Grid
container
item
style={{
alignItems: "center",
paddingBottom: "8px",
}}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Supervisor
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Employee
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid
container
item
xs={6}
md={3}
style={{ alignContent: "center" }}
direction="row"
>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
{useTranslation("employee")}
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Hidden smDown>
<Grid container item md={6} />
</Hidden>
</Grid>
</ExpansionPanelDetails>