CODEWITHSUNDEEP
cssreactjsflexboxmaterial-ui
Clyde Barrow
Clyde Barrow

Reputation: 2102

Material UI - center an element vertically inside FlexBox

In my react app I created a card with min width and height and it contains only a header. I would like to add a flexbox which would take the whole left space with justify-content="center" and align-items="center" so when I add a circular progress element it will be in the middle of the card. Unforunately whatever I do the flexbox's height equals the loading spinner height and it does not take the whole space. How to fix it? My Component: 

   function AccountSettings({isLoading, id, username, isDisable}) {
        const classes = useStyles();

        return (
            <Card
                className={classes.accountSettings}
            >
                <CardHeader
                    title="Something"
                />
                <Divider/>
                    <Box
                        display="flex"
                        alignItems="center"
                        justifyContent="center"
                        height={"100%"}
                        width={"100%"}
                    >
                        <CircularProgress/>
                    </Box>
            </Card>
        );
    }

My style:

import {makeStyles} from "@material-ui/styles";

export default makeStyles(theme => ({
    root: {
        maxWidth: "1000px"
    },
    pageTitle: {
        padding: "5px"
    },
    accountSettings: {
        minWidth: "312px",
        minHeight: "273px",
    }
}));

And here my main view:

<div className={classes.root}>
    <AccountSettings/>
</div>

This image shows my issue issue

Upvotes: 1

Views: 2657

Answers (1)

brietsparks
brietsparks

Reputation: 5006

Here is one solution

Add the following to the styles:

accountSettings: {
  display: 'flex',
  flexDirection: 'column'
},
box: {
  flexGrow: 1
}

And add the class to the Box element:

<Box
  className={classes.box}

Upvotes: 2

Related Questions