I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox.
The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different frameworks). I am using the card from here -> https://material-ui.com/demos/cards/
I've tried pretty much everything i could think of from align-items to align-self and different display types. I might be missing something here since i usually work with Bootstrap so i hope a CSS Master can help me out. I'll attach the pic below for ref.
Also for ref here's how my code looks in react( ApiPosts is my cards component) ->
<Grid container>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Row className="rowSpacer">
<Col xs>
<Typography variant="title" align="center" color="textPrimary" gutterBottom>
Posts are below
</Typography>
</Col>
</Row>
<Divider />
<ApiPosts />
</Paper>
</Grid>
</Grid>
And finally my cards are wrapped in <Row around="xs">
(4 posts in a row) and each card in a col <Col xs >
Thanks in advance!
Edit: Solved thanks to Ivan's answer.Here's the code in case anyway needs it (working on Material-UI Cards).
.portCardCl {
display: flex;
flex-direction: column;
height:100%;
}
.portBodyCl {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
flex-direction: column;
}
.portButCl{
display: flex;
justify-content: flex-start;
}
portCardCl
goes on the first <Card>
, portBodyCl
goes on <CardActionArea>
and finally portButCl
goes on <CardActions>
To center a button in React Material UI, we can put the button in a Grid component. And we set the justify prop of the Grid to 'center' and we set the container prop to true . to add the Grid prop with the container and justify props.
You need to add display flex to the parent element of your Button. {{display: 'flex', justifyContent: 'flex-end'}} are defined in the parent element to align items in the child element.
Here is example with css-grid.
const {
Button,
createMuiTheme,
CssBaseline,
MuiThemeProvider,
Typography,
Paper,
withStyles,
} = window['material-ui'];
const styles = theme => ({
root: {
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gridGap: "24px",
},
card: {
display: "grid",
gridTemplateRows: "1fr auto",
gridGap: "8px",
minHeight: 280,
backgroundImage: `url(https://via.placeholder.com/100x200)`,
backgroundSize: "cover"
},
body: {
alignSelf: "end",
textAlign: "center"
},
actions: {
display: "flex",
justifyContent: "space-between"
}
});
const Grid = withStyles(styles)(
class Grid extends React.Component {
render () {
const { classes } = this.props;
const cards = [1, 2, 3, 4];
return (
<div className={classes.root}>
{cards.map(c => (
<Paper key={c} className={classes.card}>
<div className={classes.body}>
<Typography variant="subheading">
Test Image
</Typography>
<Typography variant="caption">
Small help text
</Typography>
</div>
<div className={classes.actions}>
<Button>Left</Button>
<Button color="primary">Right</Button>
</div>
</Paper>
))}
</div>
)
}
}
)
const theme = createMuiTheme();
ReactDOM.render((
<MuiThemeProvider theme={theme}>
<Grid />
</MuiThemeProvider>
), document.querySelector("#root"))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<div id="root"></div>
Here is example of card with flex
using only
.card {
padding: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .13);
background: skyblue;
border-radius: 4px;
font-family: "Helvetica", sans-serif;
display: flex;
flex-direction: column;
height: 280px;
width: 160px;
}
.card__body {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
}
.card__actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
}
<div class="card">
<div class="card__body">
Test Text
</div>
<div class="card__actions">
<button>Left</button>
<button>Right</button>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With