How can I align items vertically in material UI?
https://codesandbox.io/s/material-demo-forked-wrn9x
Here I want put Start element and top, Center element at center and End element at bottom
I am looking for clearest and best solution
If you using grid just do this :
<Grid
container
direction="column"
justify="center"
alignItems="center"
spacing={3}
className={classes.container}
>
you can use the interactive tool of MUI doc for play around and get the props you have to pass for create all the layout you need in the future.
https://material-ui.com/components/grid/#grid
Here is the code that will make three grids - start, centre and end to appear in a column one after another. This layout will remain the same across all screen resolutions/breakpoints.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
border: '2px solid #969292',
}
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>Start</Paper>
</Grid>
<Grid item item xs={12}>
<Paper className={classes.paper}>Center</Paper>
</Grid>
<Grid item item xs={12}>
<Paper className={classes.paper}>End</Paper>
</Grid>
</Grid>
</div>
);
}
This code will generate a layout like below:
Related
Trying to display 3 items per row in a grid, using the MUI Grid component:
const itemStyle = {
backgroundColor: "red",
height: "300px",
};
function App() {
return (
<Grid container gap={1} spacing={1} direction={"row"}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
);
}
However, the 3rd item always goes to the next line. If I make it xs={3}, all 3 items will be on the same line but there's a bunch of extra space at the end of each row.
Created this in a fresh project without any themes. It works where there is no gap, spacing={1} doesn't do anything - all 3 items will have no space between them. I suspected it was because the number of columns didn't add up, so I tried
<Grid container gap={1} columns={14}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
But that just does the same thing as xs={3}.
Using the React #mui package, I want to create a grid of items that all stretch to the same height as the tallest item. I've tried searching for similar questions but have not found a working solution, and using #mui v5. Here's my example, also found on Sandbox https://codesandbox.io/s/happy-moon-y5lugj?file=/src/App.js. I prefer a solution (if possible) using the #mui components rather than grid css directly. Also I cannot fix the number of columns, it needs to be responsive.
import * as React from "react";
import {
Box,
Card,
Container,
Grid,
Paper,
Table,
TableBody,
TableRow,
TableCell,
Typography
} from "#mui/material";
export default function App() {
const createTable = (rows) => {
return (
<Table>
<TableBody>
{[...Array(rows).keys()].map((n) => {
return (
<TableRow key={n}>
<TableCell>Aaaaa</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
};
return (
<Box p={3}>
<Container maxWidth="sm" height="100%">
<Grid container spacing={2} height="100%">
<Grid item height="100%">
<Paper height="100%" elevation={3} sx={{ p: 3 }}>
<Typography variant="h4">Something</Typography>
{createTable(5)}
</Paper>
</Grid>
<Grid item height="100%">
<Paper height="100%" elevation={3} sx={{ p: 3 }}>
<Typography variant="h4">More things</Typography>
{createTable(3)}
</Paper>
</Grid>
</Grid>
</Container>
</Box>
);
}
This is what I get now. I want the shorter item to be padded on the bottom so its the same height as the first.
Please use this code from the box downwards. You can read more about how to work with grid items on the mui website here.
const StackOverflow = () => {
const createTable = (rows) => {
return (
<Table>
<TableBody>
{[...Array(rows).keys()].map((n) => {
return (
<TableRow key={n}>
<TableCell>Aaaaa</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
};
return (
<Box p={3}>
<Container maxWidth="sm">
<Grid container spacing={2}>
<Grid item xs={6}>
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
<Typography variant="h4">Something</Typography>
{createTable(5)}
</Paper>
</Grid>
<Grid item xs={6}>
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
<Typography variant="h4">More things</Typography>
{createTable(3)}
</Paper>
</Grid>
</Grid>
</Container>
</Box>
);
};
Something that worked good for me was to use the following in the Papers sx prop:
{{height: "100%", display: "flex", alignItems: "center"}}
My objective is to write the same full width in xs, sm, md, lg for the Card display. Can anyone help me in this query?
This is my code:
import {
Grid,
Card,
CardHeader,
Avatar,
IconButton,
CardContent,
Typography
} from "#material-ui/core";
import React from "react";
import "./styles.css";
import MoreVertIcon from "#material-ui/icons/MoreVert";
class App extends React.Component {
render() {
return (
<Grid container spacing={1}>
<Grid item xs={12}>
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
This impressive paella is a perfect party dish and a fun meal to
cook together with your guests. Add 1 cup of frozen peas along
with the mussels, if you like.
</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
);
}
}
export default App;
Here is the Code Sandbox sample
I have this code:
<Grid item xs={12}>
<Grid container spacing={8} >
<Grid item xs={3} ></Grid>
{ someState && <SomeComponent /> }
</Grid>
</Grid>
At the first render, someState will be always false and only when I change that state I will show SomeComponente but I need to have that Grid visible and empty, in other words, using the row space in the dom. I don't want it hidden. How can I do it? I tried by putting the Gridcomponent empty as I show in the code, but the Grid container isn't using that space.
const SomeComponent = () => (
<Fragment>
<Grid item xs={3}>
<Typography variant="body1">Title</Typography>
</Grid>
<Grid item xs={3}>
asdasdasd
</Grid>
</Fragment>
);
Try this:
<Grid item xs={3} >{someState && <SomeComponent />}</Grid>
This will create the Grid regardless of someState and will fill the space, after someState is thruthy.
How can i make this in material ui react?
The main problem i have is i don't know how to make the right part with the refresh icon.
This question is kinds an amateur question. But I can give you little insights how you can start with little basics and you can later make it stateful component.
const styles = theme => ({
margin: {
margin: theme.spacing.unit,
},
roundBorder : {
borderRadius: '25px',
borderColor: '#80bdff',
border: '1px solid #ced4da',
}
});
function App(props) {
const { classes } = props;
return (
<div>
<div className={classes.margin}>
<Grid container spacing={8} alignItems="flex-end">
<Grid item>
<TextField className={classes.roundBorder} id="input-with-icon-grid" label="With a grid" />
</Grid>
<Grid item>
<AccountCircle />
</Grid>
</Grid>
</div>
</div>
);
}
This will create something like this:
Check this sample which has searching with icon, just align icon to the right:
https://codesandbox.io/s/material-demo-jhy9f