Positioning a Material UI button to the rightmost of row

user_764512 0
Viewed 781

Trying to align this React material-ui button to the right-most of the page and can't seem to get this working:

    <Grid item justify="flex-end">
      <Button              
        variant="contained"
        color="primary"
        onClick={() => myFunction()}
      >
        Submit
      </Button>
    </Grid>

Have tried justify="flex-end" but doesn't seem to be working.

material-ui reactjs css
2 Answers

This code works for me.

<Box display="flex" justifyContent="flex-end">
  <Button              
    variant="contained"
    color="primary"
    onClick={() => myFunction()}
  >
    Submit
  </Button>
</Box>

If you want to use Grid, please use inline style like this.

 <Grid item style={{display:"flex"}} justify="flex-end">
          <Button              
            variant="contained"
            color="primary"
            onClick={() => myFunction()}
          >
            Submit
          </Button>
</Grid>
user_148554880

I think justify= goes on the container instead of the item, like this:

<Grid container justify="flex-end">
  <Grid item>
    <Button              
      variant="contained"
      color="primary"
      onClick={() => myFunction()}
    >
      Submit
    </Button>
  </Grid>
</Grid>
user_16335100
Related