mui / mui/material-ui

[Dialog] Form + scroll in DialogContent

Open
#13,253 27 comments 9 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

priority: important scope: dialog
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

I know this has been discussed in #12126, but there is still an issue with the scrolling, the title and the actions aren't fixed and they scroll

Here is the codesandbox: https://codesandbox.io/s/qlo16r5v59

Here is the code

<Dialog open aria-labelledby="form-dialog-title">
  <form
    onSubmit={e => {
      alert("form submit!");
      e.preventDefault();
    }}
  >
    <DialogTitle id="form-dialog-title">Log in</DialogTitle>
    <DialogContent>
      <DialogContentText>
        Please enter your account number and password.
      </DialogContentText>
      <TextField
        autoFocus
        margin="dense"
        label="Account Number"
        type="text"
        fullWidth
      />
      <TextField
        margin="dense"
        label="Password"
        type="password"
        fullWidth
      />
      <div style={{ height: 1000 }} />
    </DialogContent>
    <DialogActions>
      <Button onClick={() => alert("cancel")} color="primary">
        Cancel
      </Button>
      <Button
        type="submit"
        onClick={() => alert("login")}
        color="primary"
        variant="contained"
      >
        Log in
      </Button>
    </DialogActions>
  </form>
</Dialog>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.