CODEWITHSUNDEEP
cssreactjsmaterial-ui
Stefan Januschke
Stefan Januschke

Reputation: 312

React & Material UI: Position <IconButton> on bottom right of <Paper> (No FAB)

Problem:

I have a react/material-ui implementation where I would like to display a edit icon floating over the bottom right corner of a paper. I have figured out how I can have it floating on the bottom right of the overall screen but this is not what I am aiming for here.

Current Behaviour:

enter image description here

Expected Behavior: enter image description here

Have the Icon Button floating over the bottom right corner of the paper component.

<Paper classnName={classes.paper}>

    <IconButton
      onClick={handleVisionEditCick}
      style={{ position: "???", bottom: 3, right: 3 }}
     >
        <EditIcon className={classes.EditIcon} />
    </IconButton>
    <Typography variant="h5" component="span" color="textPrimary">
         {vision}
    </Typography>
</Paper>

Upvotes: 1

Views: 7114

Answers (1)

Alessio Marchi
Alessio Marchi

Reputation: 584

That's maybe not the best solution, but you can try using Grid

      <Grid container justify="flex-end" alignItems="flex-end">
        <IconButton style={{ bottom: 3, right: 3 }}>
          <Edit className={classes.EditIcon} />
        </IconButton>
      </Grid>

Example

Upvotes: 4

Related Questions