Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align Card Buttons on bottom Material UI

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.

enter image description here

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>

like image 448
Dante R. Avatar asked Oct 05 '18 16:10

Dante R.


People also ask

How do I center align a button in MUI?

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.

How do you right align buttons in react?

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.


1 Answers

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>
like image 159
Ivan Burnaev Avatar answered Sep 25 '22 03:09

Ivan Burnaev