gpt4 book ai didi

css - Material-UI 下拉列表在对话框中溢出

转载 作者:行者123 更新时间:2023-12-05 09:30:43 25 4
gpt4 key购买 nike

我正在尝试在 Dialog(模态)中使用下拉选择。但是,选项会被模态底部截断。我怎样才能获得继续向下越过底部边界的选项?

我正在使用 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>

(极端)示例:Code Sandbox

最佳答案

在您的自动完成中移除或设置disablePortal属性为false。如果你使用 portal在下拉列表中。下拉列表的真实 DOM 元素将附加到对话框层次结构之外(您可以使用检查元素来确认它),因此它的大小不受对话框布局的限制。

Codesandbox Demo

关于css - Material-UI 下拉列表在对话框中溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69418435/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com