Fix the CheckboxGroupInput design

marmelab · Jan 10, 2019 · 9fe6f2b · 9fe6f2b
1 parent ad3b948
commit 9fe6f2b
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js
@@ -18,9 +18,12 @@ const sanitizeRestProps = ({ setFilter, setPagination, setSort, ...rest }) =>
 const styles = theme => ({
     root: {},
     label: {
-        transform: 'translate(0, 5px) scale(0.75)',
+        transform: 'translate(0, 1.5px) scale(0.75)',
         transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`,
     },
+    checkbox: {
+        height: 32,
+    },
 });
 
 /**
@@ -114,6 +117,7 @@ export class CheckboxGroupInput extends Component {
             options,
             translate,
             translateChoice,
+            classes,
         } = this.props;
         const choiceName = React.isValidElement(optionText) // eslint-disable-line no-nested-ternary
             ? React.cloneElement(optionText, { record: choice })
@@ -136,6 +140,7 @@ export class CheckboxGroupInput extends Component {
                     <Checkbox
                         id={`${id}_${get(choice, optionValue)}`}
                         color="primary"
+                        className={classes.checkbox}
                         {...options}
                     />
                 }