Add checkbox style

kubeflow · Oct 22, 2020 · e7f8f37 · e7f8f37
1 parent 85c92b6
commit e7f8f37
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Objective.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Objective.jsx
@@ -47,6 +47,9 @@ const useStyles = makeStyles({
   selectBox: {
     width: 150,
   },
+  checkBox: {
+    textAlign: 'center',
+  },
 });
 
 const Objective = props => {
@@ -169,17 +172,16 @@ const Objective = props => {
         </Grid>
       </Grid>
       <Grid container alignItems={'center'} className={classes.parameter}>
-        <Grid item xs={12} sm={2}>
+        <Grid item sm={2}>
           <Typography variant={'subtitle1'}>
             <Tooltip title={'Strategy for extracting metrics to calculate objective'}>
               <HelpOutlineIcon className={classes.help} color={'primary'} />
             </Tooltip>
             MetricStrategies (optional)
           </Typography>
         </Grid>
-        <Grid item xs={12} sm={1}>
+        <Grid item sm={1} className={classes.checkBox}>
           <FormControlLabel
-            className={classes.checkBox}
             control={
               <Checkbox
                 checked={checkedSetStrategies}
@@ -191,7 +193,7 @@ const Objective = props => {
           />
         </Grid>
         {checkedSetStrategies && (
-          <Grid item xs={12} sm={9}>
+          <Grid item sm={9}>
             {props.metricStrategies.map((metric, mIndex) => {
               return (
                 <Grid container key={mIndex} className={classes.parameter}>

diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Objective.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Objective.jsx
@@ -47,6 +47,9 @@ const useStyles = makeStyles({
   selectBox: {
     width: 150,
   },
+  checkBox: {
+    textAlign: 'center',
+  },
 });
 
 const Objective = props => {
@@ -169,17 +172,16 @@ const Objective = props => {
         </Grid>
       </Grid>
       <Grid container alignItems={'center'} className={classes.parameter}>
-        <Grid item xs={12} sm={2}>
+        <Grid item sm={2}>
           <Typography variant={'subtitle1'}>
             <Tooltip title={'Strategy for extracting metrics to calculate objective'}>
               <HelpOutlineIcon className={classes.help} color={'primary'} />
             </Tooltip>
             MetricStrategies (optional)
           </Typography>
         </Grid>
-        <Grid item xs={12} sm={1}>
+        <Grid item sm={1} className={classes.checkBox}>
           <FormControlLabel
-            className={classes.checkBox}
             control={
               <Checkbox
                 checked={checkedSetStrategies}
@@ -191,7 +193,7 @@ const Objective = props => {
           />
         </Grid>
         {checkedSetStrategies && (
-          <Grid item xs={12} sm={9}>
+          <Grid item sm={9}>
             {props.metricStrategies.map((metric, mIndex) => {
               return (
                 <Grid container key={mIndex} className={classes.parameter}>