Material UI checkbox - text alignment

user_10539128 0
Viewed 1285

I am using Material UI 4.8.3 and have the following:

const CustomizedCheckbox = withStyles({
  root: {
    color: '#0f236e',
    '&$checked': {
      color: '#0f236e',
    },
  },
  checked: {},
})((props) => <Checkbox color="default" {...props} />);


<Grid
        item
        xs={12}
        sm={12}
        md={12}
        lg={12}
        className="disclaimerAndNotes"
      >
        <FormControl fullWidth>
          <FormControlLabel
            control={<CustomizedCheckbox />}
            label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>}
          />
        </FormControl>
      </Grid>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

What the checkbox looks like: Like this

What I want to achieve is, that the checkbox is aligned with the very beginning of the text.

How to achieve this ?

material-ui css javascript
1 Answers

You can use CSS to achieve this

<FormControl fullWidth>
  <FormControlLabel
    style={{display:'table'}}
    control={<div style={{display:'table-cell'}}><CustomizedCheckbox/></div>}
    label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>}
  />
</FormControl>

Add a wrapper around the <CustomizedCheckbox> with display:table-cell prop and add display:table to your <FormControlLabel>

Here you have a working codesandbox

user_44406460
Related