How do I center a Fab inside a circular progress?

Question

I am trying to center an fab inside the circular progress bar. I was told I could use relative position for the parent and the children have absolute position. I would like to keep it responsive so if the screen is scaled down it will look the same.

These are both Material UI components.

            <div className="event-dialog-header">
                <DialogTitle id="form-dialog-title">Event Details</DialogTitle>   
                <div className="event-dialog-delete">        
                { props.selectedEvent &&
                    <Fab aria-label="delete" size="small" onClick={handleOpenAlert} >
                        {success ? <CheckIcon /> : <DeleteIcon />}
                    </Fab> 
                }
                <CircularProgress size={68}  />
                </div>
            </div>

.event-dialog {
    .event-dialog-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .event-dialog-delete {
            position: relative;
            .MuiCircularProgress-root {
                position: absolute;
                top: 0;
                right: 0;
            }
            .MuiFab-sizeSmall {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
}

This is what I am trying to do:

Answer 1

You have the right starting point. You just need to adjust the position of the Fab and the size of the CircularProgress.

Here is a working example:

import React from "react";
import ReactDOM from "react-dom";

import Fab from "@material-ui/core/Fab";
import DeleteIcon from "@material-ui/icons/Delete";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  eventDialogDelete: {
    position: "relative",
    "& .MuiCircularProgress-root": {
      position: "absolute",
      // Moving this a little off the edge prevents horizontal scrollbar from flickering in and out
      top: 3,
      right: 3
    },
    "& .MuiFab-sizeSmall": {
      position: "absolute",
      top: 9,
      right: 9
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div className={classes.eventDialogDelete}>
      <Fab aria-label="delete" size="small">
        <DeleteIcon />
      </Fab>
      <CircularProgress size={52} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);