CODEWITHSUNDEEP
cssreactjsmaterial-ui
picklepick
picklepick

Reputation: 1607

Material-UI Dropdown overflowed in Dialog

I'm trying to use a dropdown select inside of a Dialog (modal). However, the options get cut off by the bottom of the modal. How can I get the options to continue further down past the bottom border?

I'm using MUI v5.

<Dialog open={open}>
  <DialogContent>
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={options}
      // getOptionLabel={(option) => option}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Numbers" />}
    />
  </DialogContent>
</Dialog>

(extreme) example: Code Sandbox

Upvotes: 4

Views: 5418

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81270

Remove or set the disablePortal prop to false in your Autocomplete. If you use portal in the dropdown list. The dropdown's real DOM element will be attached outside of the Dialog hierarchy (you can use inspect element to confirm it), so its size isn't constrained by the layout of the dialog.

Codesandbox Demo

Upvotes: 13

Related Questions