CODEWITHSUNDEEP
reactjsmaterial-ui
Arundeep Chohan
Arundeep Chohan

Reputation: 9969

Material UI Aligning Checkbox

How would I go about aligning my checkbox vertically to the Calender element. It's always down to the right where it's supposed to due to padding. Or the invites not aligned.

enter image description here

<Grid item xs={12} >
  <Typography noWrap className={classes.accordionCheckMarkFor} >
    Calender
  </Typography>
  <AccordionActions>
    <Box> 
      <Checkbox />
      <Checkbox />
      <Checkbox >
    </Box>
  </AccordionActions>
</Grid>

I tried certain things

accordionCheckMarkFor:{
    fontSize:"110%",
    fontWeight: 500,
    float:'left'
},
alignCheckboxes:{
    marginTop:'0px',
    paddingTop:'0px',
}

enter image description here

as well as trying to margintop:auto the container the invites,documents were in enter image description here

Upvotes: 0

Views: 4320

Answers (1)

Soufiane Boutahlil
Soufiane Boutahlil

Reputation: 2604

You should use flex box:

.MuiGrid-root {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

You can check here: https://stackblitz.com/edit/react-2chfxt?file=src%2Fstyle.css

Upvotes: 1

Related Questions