如何使自动提示建议溢出对话框容器？

Question

如何使autosuggest建议位于对话框上方而不是对话框中？避免对话框内容滚动

沙盒示例https://codesandbox.io/embed/adoring-bogdan-pkou8

Answer 1

将最大高度添加到呈现建议的 Paper 组件。

renderSuggestionsContainer={options => (
    <Paper  style={{'maxHeight':100, overflow:'auto'}} {...options.containerProps} square>
         {options.children}
    </Paper>
)}

Answer 2

我不知道您正在使用的库，但是具有 class 名称 MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-rounded 的外部对话框 div 元素需要 overflow: visible 样式。 MuiDialogContent-root div 元素需要 overflow-y: unset。对我来说，这在代码沙箱中起到了作用。

要解释这种行为：对话裁剪所有垂直溢出他的边界并为此创建滚动条的内容。因为自动提示组件在对话框组件内 DOM-wise 并且位于 absolute ，所以当它变得比对话框大时它会被切断。告诉对话框不要裁剪它的内容，也不要通过滚动隐藏溢出的内容，让自动建议组件正确溢出。但这也意味着您不能再在对话框内滚动。

您应该让自动建议组件将其根元素附加到正文并以输入字段为轴心点定位自身。这样你就不必操纵溢出，因为自动建议是 DOM-wise "above" 对话框组件。

如何使自动提示建议溢出对话框容器？

How to make autosuggest suggestions overflow the dialog container?

javascript

css

reactjs

material-ui

autosuggest