如何使自动建议的建议溢出对话框容器？答案

【问题标题】：How to make autosuggest suggestions overflow the dialog container?如何使自动建议的建议溢出对话框容器？
【发布时间】：2019-12-09 20:01:12
【问题描述】：

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

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

【问题讨论】：

为什么不把对话框的高度变大？
就我而言，我想提出容器建议以放置在对话框上方。让对话框高度变大不是问题

标签： javascript css reactjs material-ui autosuggest

【解决方案1】：

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

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

您应该让自动提示组件让其根元素附加到正文并以输入字段作为枢轴点来定位自己。这样您就不必处理溢出，因为自动建议是 DOM-wise “在”对话框组件的“上方”。

【讨论】：

【解决方案2】：

将 max-height 添加到呈现建议的 Paper 组件。

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

【讨论】：

这不是我要找的。 max-height - 不在对话框上方放置建议容器
如果您将此最大高度添加到建议列表中，它将有一个单独的滚动条。因此，您滚动模态内容的问题将得到解决。对话框上方的位置是什么意思？试试看 - codesandbox.io/s/priceless-visvesvaraya-l0ewj?fontsize=14