Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

html - How with Material UI to align input fields and buttons in the correct way in a dialog

In my React app, I have to align correctly the items in a dialog of MUI.

As per the screenshot, I have an issue to align the input fields Date and time. They should be aligned in the center and the Date input should start aligned with the title text above and the Time input should align with the button on the far right Save and close.

The second main issue is the buttons, I need to position Cancel and Save and close on the right and on the same row but on the left side, the button Remove call.

I have an issue making these alignments.

Issue

The code of the dialog

const useStyles = makeStyles(theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(1),
    '& .MuiFilledInput-root': {
      borderRadius: 0,
    },
  },
  dialogTitle: {
    marginTop: theme.spacing(2),
  },
  container: {
    margin: theme.spacing(1),
    width: '80%',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
  },
  button: {
    marginRight: theme.spacing(1),
    height: 40,
  },
  paper: {
    overflowY: 'unset',
  },
  closeButton: {
    position: 'absolute',
    left: '93%',
    top: '3%',
    color: 'gray',
  },
  buttonRight: {
    justifyContent: 'flex-end',
  },
}));

 <Dialog
      open={open}
      fullWidth
      maxWidth="md"
      classes={{ paper: classes.paper }}
    >
      <DialogTitle className={classes.dialogTitle}>
        <Typography variant="h1" gutterBottom>
          Schedule a call
        </Typography>
        <InfoCallMessage call={appointment} />
      </DialogTitle>
      {!loading ? (
        <>
          <DialogContent className={classes.root}>
            <Grid
              className={classes.container}
              container
              justify="flex-end"
              alignItems="center"
              spacing={1}
            >
              <Grid item xs={8}>
                <MuiPickersUtilsProvider utils={LuxonUtils}>
                  <DatePicker
                    className={classes.input}
                    disableToolbar
                    variant="inline"
                    label="Date"
                    format="cccc, LLLL dd"
                    helperText=""
                    value={date}
                    margin="normal"
                    onChange={newDate => {
                      handleDateOnChange({ newDate });
                    }}
                    inputVariant="filled"
                    fullWidth
                    minDate={new Date()}
                  />
                </MuiPickersUtilsProvider>
              </Grid>

              <Grid item xs={4}>
                <TextField
                  key={time}
                  id="time"
                  label="Time"
                  type="time"
                  defaultValue={time}
                  className={classes.textField}
                  InputLabelProps={{
                    shrink: true,
                  }}
                  variant="filled"
                  margin="normal"
                  onChange={e => {
                    const { value } = e.target;
                    setTime(value);
                  }}
                  fullWidth
                />
              </Grid>
              <ErrorDateTimeIsAfter />
            </Grid>
          </DialogContent>
          <DialogActions className={classes.buttonRight}>
            <IconButton
              className={classes.closeButton}
              onClick={() => closeDialog()}
            >
              <CloseIcon />
            </IconButton>
            <Grid justify="space-between" container spacing={1}>
              <Grid item>
                <Button
                  color="secondary"
                  variant="contained"
                  onClick={() => closeDialog()}
                  className={classes.button}
                >
                  Remove call
                </Button>
              </Grid>
              <Grid item>
                <Button
                  color="primary"
                  variant="outlined"
                  onClick={() => closeDialog()}
                  className={classes.button}
                >
                  Cancel
                </Button>
              </Grid>
              <Grid item>
                <Button
                  color="primary"
                  variant="contained"
                  onClick={() => handelSave()}
                  className={classes.button}
                  disabled={!isAfter(parseISO(`${date}T${time}`), new Date())}
                >
                  Save and Close
                </Button>
              </Grid>
            </Grid>
          </DialogActions>
        </>
      ) : (
        <Loading />
      )}
    </Dialog>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...