Im trying to align some cards vertically in the grid. Here is my sample code.
I have tried the following
Using align="center" and putting the <Box m={1}> section inside another box with display="flex" align="center"
Using the grid system and using align="center"
Both solutions seem to squish the cards horizontally and not vertically align them.
<Grid item md={6} xs={12}>
<Box m={1}>
<Box mb={2}>
<Card className={classes.root} elevation={cardElevation}>
<CardContent style={{ paddingBottom: "0px" }}>
<Typography variant="h5" component="h2">
Email <EmailIcon />
</Typography>
</CardContent>
<Box display="flex" justifyContent="center">
<Button
size="small"
color="primary"
align="center"
href={links.Email}
>
email#gmail.com
</Button>
</Box>
</Card>
</Box>
<Box mb={2}>
<Card className={classes.root} elevation={cardElevation}>
<CardContent style={{ paddingBottom: "0px" }}>
<Typography variant="h5" component="h2">
LinkedIn <LinkedInIcon />
</Typography>
</CardContent>
<Box display="flex" justifyContent="center">
<Button
size="small"
color="primary"
align="center"
href={links.LinkedIn}
>
View My Profile
</Button>
</Box>
</Card>
</Box>
</Box>
</Grid>
You should add flexDirection property to <Box m={1}> to align your card vertically.
Try this:
<Grid item md={6} xs={12}>
<Box m={1} display="flex" alignItems="center" flexDirection="column">
<Box mb={2}>
...
</Box>
<Box mb={2}>
...
</Box>
</Box>
</Grid>
Related
I'm interested how I can add space between these buttons:
<Box pb={2}>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="baseline"
>
<Grid item>
<Typography variant="h4">
Tickets
</Typography>
</Grid>
<Grid item>
<Box component="span">
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Open Ticket
</Button>
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Export
</Button>
</Box>
</Grid>
</Grid>
</Box>
I tried to add:
<Box bgcolor="red" display="inline-block">
<Button sx={{ m: 2 }} variant="contained">
margin
</Button>
</Box>
But looks like I need to add some configuration to main container between space is not applied. Do you know what is the proper way to add space between buttons?
you can use spacing.the space between the type item component. It can only be used on a type container component. (Grid API)
if you want to use material-ui Grid props you should put each button in separated Grid item.
its looks like this:
<Box pb={2}>
<Grid
container
spacing={2}
direction="row"
justifyContent="space-between"
alignItems="baseline"
>
<Grid item>
<Typography variant="h4">
Tickets
</Typography>
</Grid>
<Grid item>
<Box component="span">
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Open Ticket
</Button>
</Box>
</Grid>
<Grid item>
<Box component="span">
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Export
</Button>
</Box>
</Grid>
</Grid>
</Box>
I am learning to use Material UI and I cannot figure out something that should be easy.
Given the card below
I want to make all the content centered except for the abcd, efgh, ijkl lines.
This is the final result I would like to have:
And This is the code:
<Grid container spacing={4} >
<Grid item xs={12} sm={6} md={4}>
<Card style={{ padding: '30px 40px 20px'}} >
<CardContent>
<Typography variant="h4" color="textSecondary" >
TEST
</Typography>
<Typography color="textSecondary">Something in here</Typography>
<Divider />
<Grid container justify={'space-between'}>
<Typography item color="textSecondary">
abcd
</Typography>
<Typography item color="textSecondary">
25
</Typography>
</Grid>
<Grid container justify={'space-between'}>
<Typography color="textSecondary">efgh</Typography>
<Typography color="textSecondary">15</Typography>
</Grid>
<Grid container justify={'space-between'}>
<Typography color="textSecondary">ijkl</Typography>
<Typography color="textSecondary">05</Typography>
</Grid>
</CardContent>
<CardActions disableSpacing>
<Button variant="contained" color="primary">
Action 1
</Button>
<Button variant="contained" color="primary">
Action 2
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
I could get the result by giving to the Typograhy elements a style={{textAlign: 'center'}} and to the CardActions a style={{display: 'flex', justifyContent: 'space-between'}} but I was wondering if there is a better way, like a MUI prop to give to grid container that tells to center align everything inside.
I tried giving the grid a justify='center' but it is not doing anything.
I got the error while using Material-UI in react
<Grid container justify="center">
<Box className={classes.box}>
<Grid item className={classes.item1}>
<Typography variant="h5" className={classes.loginTitle}>
Login
</Typography>
<Typography variant="body1" className={classes.subTitle}>
to continue to Program
</Typography>
</Grid>
{renderForm(window.location.pathname)}
<Grid
item
className={classes.component}
alignItems="center"
justify="space-between"
>
<Typography
variant="body2"
color="primary"
className={classes.createAccountLink}
>
<Link
style={{ cursor: "pointer" }}
onClick={(e) => e.preventDefault()}
>
Create account
</Link>
</Typography>
<Button
variant="contained"
color="primary"
disableElevation
className={classes.btn}
>
Login
</Button>
</Grid>
Grid uses CSS flexbox for layout. You cannot set alignItems in a Grid item, it must be placed in a Grid container. See this interactive example to know how to use alignItems in
Grid.
// invalid
<Grid container>
<Grid item alignItems="center">
</Grid>
</Grid>
// valid
<Grid container alignItems="center">
<Grid item>
</Grid>
</Grid>
I hit a wall.
Problem is that handleDeleteItem() always receives last item._id instead of given.
On the other hand goToEdit() is working properly. So far I have tried placing key property in different components, deleting node_modules and rebuilding app.
I have no idea what causes this situation.
I have component like this:
export class List extends Component {
render() {
const {
classes,
items,
anchorEl,
handleDeleteItem,
openItemMenu,
closeItemMenu,
goToEdit,
} = this.props;
return (
<main className={classes.content}>
<div className={classes.toolbar} />
<Typography
variant="h3"
color="textSecondary"
gutterBottom
align="center"
>
Items
</Typography>
<Grid container spacing={3}>
<Grid item xs={12} align="right">
<Button
variant="outlined"
color="primary"
startIcon={<AddIcon />}
onClick={(e) => goToEdit(e, 0)}
>
Add new
</Button>
</Grid>
{!items.length && (
<Grid item xs={12} align="center">
<Typography variant="overline">
List empty!
</Typography>
</Grid>
)}
{items.map((item) => (
<Grid item key={item._id} xs={12}>
<Paper
elevation={3}
style={{
borderLeft: `5px solid ${item.color}`,
}}
onClick={(e) => goToEdit(e, item._id)}
className={classes.paper}
>
<Grid container>
<Grid item xs={11}>
<Typography variant="subtitle1" color="textSecondary">
{item.name}
</Typography>
</Grid>
<Grid item xs={1} align="right">
<IconButton
className={classes.showOnHover}
size="small"
edge="end"
aria-label="delete"
onClick={(e) => openItemMenu(e)}
>
<MoreVertIcon />
</IconButton>
<Menu
id="item-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={(e) => closeItemMenu(e)}
TransitionComponent={Fade}
>
<MenuItem
onClick={(e) => handleDeleteItem(e, item._id)}
>
Usuń bajkę
</MenuItem>
</Menu>
</Grid>
<Grid item xs={12}>
<Box
component="div"
my={2}
textOverflow="ellipsis"
overflow="hidden"
>
<Typography noWrap variant="body2">
{item.description}
</Typography>
</Box>
</Grid>
</Grid>
</Paper>
</Grid>
))}
</Grid>
</main>
);
}
}
I am trying to build kanban board with grid layout. there is seven columns in kanban boards. i have used materail Ui grid for each columns.
I have tried with below css but it's not working
overflow: auto;
width:100%
I have also tried with Single column gridlist but it also not working.
import React from 'react';
import PropTypes from 'prop-types';
import App from "../components/App";
import Header from "../components/Header";
import { withStyles } from '#material-ui/core/styles';
import Grid from '#material-ui/core/Grid';
import GridList from '#material-ui/core/GridList';
import Paper from '#material-ui/core/Paper';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: 30,
display: 'flex',
oveflow: "auto",
maxWidth: "100%"
},
card: {
minWidth: 180,
marginBottom:20
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
content: {
flexGrow: 1
},
paper: {
maxWidth: 800,
margin: `${theme.spacing.unit}px auto`,
padding: theme.spacing(2)
},
});
function SimpleCard(props) {
const { classes } = props;
const bull = <span className={classes.bullet}>•</span>;
return (
<App>
<Header />
<main className={classes.content}>
<div className={classes.toolbar} />
<div className={classes.paper}>
<Grid container className={classes.root} spacing={16}>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day Testing
</Typography>
<Typography variant="h5" component="h2">
Task 10000
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day Testing
</Typography>
<Typography variant="h5" component="h2">
Task 11562
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
</Grid>
</div>
</main>
</App>
);
}
SimpleCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(SimpleCard);
How to add horizontal scroll in grid column layout?
Notice that when you shrink the window of the browser then it appears horizontal scrollbar. Horizontal scrollball only appears when the content overflows outside the browser window. Try to set the width of your root wider than the wide of your browser window. For example 2000px. And delete the width: "100%"