Material-UI formControlLabel whole label is clickable only text should be

user_9141308 0
Viewed 5235

I am new to the material UI. here I have the following form

<FormControl
  variant="outlined"
  className={css.formControl}
  margin="dense"
  key={"abc_" + index}
>
  <FormControlLabel
    control={
      <Checkbox
        onClick={handleClick(data)}
        checked={_.some(selected, { Id: selected.Id })}
        value={selected.Id}
        color="default"
      />
    }
    label={data?.Name ?? "NO_LABEL"}
  />
</FormControl>

Now, this whole label gets clickable as the area is a bit long, so, what I am trying is the only the checkbox and the text should be clickable and the other empty space should not be clicked. Here , I have given the 

max-width for that label to be 272px.

How do I add that?

Thanks.

react-material material-ui reactjs html javascript
2 Answers

You can prevent parent elements from click events, as well as allow the child to do it.

Use pointer-events to disable click event.

pointer-events: none;

<FormControlLabel
  style={{ pointerEvents: "none" }}
  control={
    <Checkbox
      onClick={handleClick}
      style={{ pointerEvents: "auto" }}
      color="default"
    />
  }
  label={"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}
/>

enter image description here

user_118722460

I had the same problem with those checkboxes, see here: checkboxes With dev tools: enter image description here

The label takes whole space (purple space).

That is due to the FormGroup displaying children in a column flex container.

To fix it, in my custom overloaded checkbox, I used:

import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import MUICheckbox from '@material-ui/core/Checkbox';

const useFormGroupStyles = makeStyles({
  root: {
    display: 'block',
  },
});

const Checkbox = (props) => {
  const { onCheck } = props;
  const formGroupClasses = useFormGroupStyles();
  const checkbox = (
    <MUICheckbox
      onChange={event => onCheck(event, event.target.checked)}
      icon={props.uncheckedIcon}
      checkedIcon={props.checkedIcon}
      color="primary"
      style={props.style}
    />
  );
  return (
    <FormGroup classes={formGroupClasses}>
      <FormControlLabel
        control={checkbox}
        label={props.label}
        style={props.style}
      />
    </FormGroup>
  );
};

export default Checkbox;
user_95171830
Related