CODEWITHSUNDEEP
reactjsflexboxgridmaterial-ui
Sedim
Sedim

Reputation: 15

How do I get a sticky footer to work using the built in Grid in Material-ui v1.0.0-beta.30?

I am trying to make a sticky-footer using Grid in Material-ui but cannot get it to work. I am nesting a row of items in a column that I am stretching down but to no avail.

class InteractiveGrid extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid container
        className={classes.root}
        direction= 'column'
        justify='flex-end'

      >
        <Grid item xs={12}>
          <Grid
            container
            className={classes.demo}
            direction= 'row'
            justify='flex-start'
            alignItems= 'flex-start'
          >
            {[0, 1, 2].map(value => (
              <Grid key={value} item>
                <Paper
                  className={classes.paper}
                  style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }}
                >
                  {`Cell ${value + 1}`}
                </Paper>
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Grid>
    )
  }
}

Upvotes: 0

Views: 6443

Answers (2)

Curious
Curious

Reputation: 73

I've needed footer for material-ui so I went here occasionally but if somebody comes as I did here is the official implementation: https://material-ui.com/components/app-bar/#bottom-app-bar

Also I've updated the example above: https://codesandbox.io/s/keen-pond-jllbi?file=/demo.js

Upvotes: 1

Matt
Matt

Reputation: 3780

Your column has no intrinsic height, so it is only the height of the row. As a result, flex-end has no effect.

Give the column a fixed or viewport height, or a percentage height if it's container has intrinsic height.

Example based on your code, using fixed height (can't use vh in CodeSandbox): https://codesandbox.io/s/llvq36r8q

Upvotes: 0

Related Questions