css - 摩纳哥编辑器智能感知不是全高

Question

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

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

任何提示将不胜感激！

更新 1

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

更新 2

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

正如你所看到的，只要我点击其他任何地方，下拉菜单就会消失。

标签： cssintellisensetailwind-cssmonaco-editor

Answer 1

问题来自一个相当常见的 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的局面。