摩纳哥编辑器智能感知不是全高答案

【问题标题】：Monaco Editor Intellisense Not Full Height摩纳哥编辑器智能感知不是全高
【发布时间】：2021-05-29 16:56:47
【问题描述】：

我将 Monaco Editor 0.22.3 与 StencilJS 和 TailwindCSS 结合使用。一切都很好，除了智能感知下拉菜单中有一个恼人的视觉故障，如下所示：

如您所见，最后建议的项目被部分遮挡。我怀疑这可能与来自 TailwindCSS 的某些样式有关，但我几乎无能为力。我尝试使用 F12 元素检查器查看是否可以找到一些提示，但事实证明这几乎是不可能的，因为智能感知下拉菜单一旦失去焦点就会消失。

任何提示将不胜感激！

这是一个带有更大编辑器的屏幕截图，以证明下拉菜单本身似乎没有被剪裁：

这是一个动画 gif，显示了尝试使用浏览器开发人员工具调试 HTML 元素时出现的问题：

如您所见，只要我点击其他任何地方，下拉菜单就会消失。

【问题讨论】：

【解决方案1】：

下拉菜单在编辑器的边界处被剪裁。我真的很想知道您如何才能看到编辑器之外的最后一个空白部分。

检查：使用浏览器的开发工具查看容器如何重叠。这样可以避免编辑器隐藏下拉菜单。

更新

在你的更新之后，我认为现在不知何故样式搞砸了。您必须想办法显示弹出窗口并仍然在开发人员工具中导航 DOM 树。尝试定位父级并查看该弹出窗口是否仅隐藏（它仍然显示在树中）或者它是动态创建的还是一个门户，它位于树的完全不同的部分。

如果无法做到这一点，请尝试禁用您拥有的所有 CSS，看看是否能解决问题。如果是这样，让 CSS 一块一块地找到罪魁祸首。

【讨论】：

【解决方案2】：

问题来自一个相当常见的 CSS 类：.tree。例如，tailwindcss 之类的库会为其添加 padding-bottom。为了撤消对 monaco 编辑器的一些添加，我们将以下内容添加到我们的 css 文件中：

.monaco-editor .suggest-widget div.tree {
    white-space: unset;
    padding-bottom: 0;
}

要为其他库和样式制品找到该解决方案：

这应该很容易，但是当我们尝试观察它时，建议对话框有隐藏的趋势。因此，我和一个 UI 人员花了一段时间阅读剧本来尝试调试它。检查它的唯一成功方法是通过运行来滥用 JS 调试器（这是来自堆栈溢出帖子的提示，我正在努力寻找给予信任），并且只是导致 JS 引擎暂停：

运行：

setTimeout(5000);

这给了我们 5 秒的时间来显示建议窗口（或设置为问题的相对时间量）。之后，您几乎可以使用快捷方式正常检查它：

ctrl+shift+c 调出调试器元素选择器。

break on subtree 可能会奏效，但我们在逐步完成更改时变得有点不耐烦。 ctrl+ / 在这种情况下似乎没有帮助，这留下了奇怪的 setTimout 来挽救这一天。

【讨论】：