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>
);
}
Related
This question already has answers here:
What is the MUI Box component for?
(4 answers)
Closed 1 year ago.
The above code is only a example. My original code it's working perfectly, but I would like write better.
Example of code:
<Grid container justifyContent="space-between">
<Box display = "flex">
<Typography> Hello World</Typography>
</Box>
<OthersComponents/>
...
</Grid>
You should have a Grid container that has children Grid items.
<Grid container>
<Grid item>
<Typography>Item 1</Typography>
</Grid>
<Grid item>
<Typography>Item 2</Typography>
</Grid>
</Grid>
Check out the docs for other props: https://mui.com/api/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 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 have a simple Grid from the material-UI library. It looks like that:
<Grid container>
<Grid item sm={6}>
<SearchPanel/>
</Grid>
<Grid item sm={6}>
<ItemStatusFilter/>
</Grid>
</Grid>
I just can't understand how can I align the first grid item in the center, and the second, for example, on the right side?
UPD: I could do it with justify-content: flex-end!important in my CSS files, but I'm not sure that it's the best way.
Below is one way of doing this for v3 and v4 of Material-UI (v5 example further down).
import React from "react";
import ReactDOM from "react-dom";
import Grid from "#material-ui/core/Grid";
function App() {
return (
<Grid container>
<Grid item xs={4}>
{/* Intentionally Empty */}
</Grid>
<Grid container item xs={4} justify="center">
<div>Search Panel</div>
</Grid>
<Grid container item xs={4} justify="flex-end">
<div>Item Status Filter</div>
</Grid>
</Grid>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This is the general idea of Duncan's comment. I have changed sm to xs just so I could verify the behavior on any size screen. In the end, Material-UI's Grid just adds some convenience around the CSS Flexbox model, so to know how to do it with Grid you need to understand how you would do it in CSS. The main thing Grid adds is the easy responsive aspects of controlling the 12-column grid differently for different screen sizes.
Here's an equivalent example for v5 (justify prop renamed to justifyContent):
import React from "react";
import ReactDOM from "react-dom";
import Grid from "#mui/material/Grid";
function App() {
return (
<Grid container>
<Grid item xs={4}>
{/* Intentionally Empty */}
</Grid>
<Grid container item xs={4} justifyContent="center">
<div>Search Panel</div>
</Grid>
<Grid container item xs={4} justifyContent="flex-end">
<div>Item Status Filter</div>
</Grid>
</Grid>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
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>