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>
Related
I'm trying to achieve the following below:
What I'm getting
I've attempted to Grids to align centrally, but the grid does not seem to do the trick. What else material UI components can I use.
export default function NoneSelectedPage(props) {
return (
<Grid
container
alignItems="center"
justifyItems="center"
direction="column"
spacing={1}
>
<Grid item>
<PetsIcon fontSize="large"></PetsIcon>
</Grid>
<Grid item>
<Typography>Nothing selected.</Typography>
</Grid>
</Grid>
);
}
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.
I would like to convert my Material-Ui Grid to a drag and drop grid. I already tried to convert it with the react-grid-layout package, but it makes weird result. What is the simple way to make the Material Ui grid drag and droppable.
My grid looks like that :
<Grid
container
spacing={2}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
{ widgets.map(elem => (
<Grid item xs={12} sm={6} md={3} key={widgets.indexOf(elem)}>
{ elem }
</Grid>
))}
</Grid>
had same issue with react-grid-layout as you. workaround is to wrap grid with relative-positioned div
<div style={{position: "relative"}}>
<ResponsiveReactGridLayout
</div>
I want to set direction property to <Grid container> component of the Material UI framework. I have read the doc
and I tried setting direction property as column like below:
<Grid container direction="column">
<Grid item xs={12} >
<h3 className="center-align">Log In</h3>
<input type="text" id="user-email-on-login" placeholder="username#email.com" />
<input type="password" id="user-password-on-login" placeholder="password" />
<button>Log In</button>
</Grid>
<Grid item xs={12}>
<button>Forgot Id/Password</button>
<button>Create Account</button>
<button>Remember Me</button>
</Grid>
</Grid>
But the output is not expected result. The output seems the same with the way I have used direction="row".
When I remove <Grid item> tag, then direction=column property on <Grid container> works perfectly.
If I have to use <Grid item> tag, is there a way to set flex-direction property as column?
You could add the "container" property to the grid element and thus have the "direction" property.
It's possible for an item to be both container and item at the same time.
Anyway, if you want to be more precise, you can upload an example of sandbox :)
Here's an example of what you want:
https://stackblitz.com/edit/react-2m3blz
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>