I'm currently using MUI Grid (but I'm open to alternate solutions) and I want two components side by side: the right most taking up 400px of width and the left component taking up the rest.
|<------------------------------- 100% of page ------------------------------->|
|<-------------------- Fill -------------------->| |<---------- 400px ----------->|
When page width is shrunk:
|<-------------------- 100% of page -------------------->|
|<--------- Fill --------->| |<---------- 400px ----------->|
My code is currently stretching the leftComponent to 100% of the page and pushing the rightComponent below it.
<Grid container spacing={3}>
<Grid item xs={12} >
<leftComponent />
</Grid>
<Grid item style={{width: "400px"}}>
<rightComponent />
</Grid>
</Grid>
All you need to do is remove the number for your xs value. Doing this just tells the item to have a width of auto which will just fill the space
<Grid container spacing={3}>
<Grid item xs>
<leftComponent />
</Grid>
<Grid item style={{width: "400px"}}>
<rightComponent />
</Grid>
</Grid>
Though I would recommend not using grid for this situation but using Box component instead as the Grid component is really meant to stick with the 12 columns and adding in a fixed width would break it.
Related
I want to style my components using the Material UI Grid system in the fashion shown in the image.
The solid lines represent the default height of the component.
The red component on the left apparently has the maximum height.
I want the green component to have the same height as that of the red component on the left.
As of now, the green component only takes a part of the total height. I do not want to specify height: 400px or something similar, as that is prone to bugs.
My code so far:
<Grid container spacing={2}>
<Grid item sm={12} md={7}>
// Red component on the left
</Grid>
<Grid item sm={12} md={5}>
// Red component on top right
// Green component that I want to extend
</Grid>
</Grid>
Im completely new to Material UI and im trying to make use of Grid concept to position my components in much dynamic way. I would like to create the grids in the following pattern and i'm stuck in finding out a solution to create two column grid having different number of rows or items.
Below is the sample layout which im trying to design using grids so, can somebody please share any ideas to achieve it?
Sample code would be more helpful.
Screenshot of my planned design
To get the Grid format in material UI, follow this docs. You can try like this, with multiple nested grid containers to achieve what you expect.
<div>
<Grid
container
spacing={1}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<Grid container item xs={4} spacing={1}>
<Grid item xs={12}>
<Paper>Some Text </Paper>
</Grid>
<Grid item xs={12}>
<Paper style={{height:400}}>Component A</Paper>
</Grid>
</Grid>
<Grid container item xs={8} spacing={1} >
<Grid item xs={12}>
<Paper style={{height:200}}>Component B</Paper>
</Grid>
<Grid item xs={12}>
<Paper style={{height:200}}>Component C</Paper>
</Grid>
</Grid>
</Grid>
</div>
I am using material UI's Grid component and making use of the auto property for the first column
so I have
<Grid container className={classes.borderclass}>
<Grid item xs={"auto"}>
<Items />
</Grid>
<Grid item xs={10}>
<Content />
</Grid>
</Grid>
However this will not fill the entire container but I do not seem to see an option for remainder in the sizes.
I have looked into css calc option however I do not see a way to get the size of the auto column in react to compare against the div
any suggestions even if it is not material ui will be appreciated.
If you check the Material-UI demo, they have a working example that shows the auto property in action. So, as the example depicted here, you don't need to specify the auto keyword. Do just this:
<Grid container className={classes.borderclass}>
<Grid item xs>
<Items />
</Grid>
<Grid item xs={10}>
<Content />
</Grid>
</Grid>
I tried everything but it seems that I'm missing something. I have been trying a lot of time to make a button center inside the grid when the screen is extra small.
This code works perfectly, but the problem is that i want my button to only center when the screen is extra small not on all sizes.
Working Code.
Grid item xs={12}>
<Grid container justify="center">
<Button color="primary" variant="raised">
Add Product
</Button>
</Grid>
</Grid>
Not working code...
Grid item xs={12}>
<Grid container className={"justify-xs-center"}>
<Button color="primary" variant="raised">
Add Product
</Button>
</Grid>
</Grid>
I have been reading the API documentation for the Grid, as i understand this is the correct way to add a predefined class in the component, but the effect seems not to work. When i inspect the element though the class justify-xs-center is found on the Grid container component as expected.
Any help is appreciated, Thank you.
Well it seems i have really misunderstood the CSS API of the Grid.
https://material-ui.com/api/grid/#css-api
My solution to this was to use the breakpoints offered by material-ui.
https://material-ui.com/layout/breakpoints/#theme-breakpoints-up-key-media-query
I created this CSS rule and applied it to the Grid container element that i wanted its contents to be centered.
const styles = theme => ({
addButtonContainer: {
[theme.breakpoints.down("xs")]: {
justifyContent: "center"
}
}
});
And this is the container that is being centered on extra small screens
<Grid item xs={12}>
<Grid container className={classes.addButtonContainer}>
<Button color="primary" variant="raised">
Add Product
</Button>
</Grid>
</Grid>
I have two elements in the grid. Codes are
<Grid container spacing={window.innerWidth > 960 ? 40: 0}>
<Grid item md={6} xs={12}>
<MallsNearby />
</Grid>
<Grid item md={6} xs={12}>
<MallsEventsSlider />
</Grid>
</Grid>
From its documentation, it has the max spacing of 40, but what if I want more spacing? How can I give more spacing than the 40?
Material-UI uses the spacing prop to select and apply a precomputed style (spacing-xs-<spacing value>) to the container element, which you can override, see here.
This style applies a margin of -<spacing value> / 2 and a width of calc(100% + <spacing value>px) to the container element, and a padding of <spacing value> / 2 to all children item elements of the container element, so you could alternatively override (or skip altogether) the default spacing and add your own manually with a custom class.