摩纳哥编辑器 Intellisense 不是全高
Monaco Editor Intellisense Not Full Height
我将 Monaco Editor 0.22.3 与 StencilJS 和 TailwindCSS 结合使用。一切都很好，除了智能感知下拉菜单中令人讨厌的视觉故障，如下所示：
如您所见，最后一个建议的项目被部分遮盖了。
我怀疑这可能与来自 TailwindCSS 的某些样式有关，但我几乎无计可施。我尝试使用 F12 元素检查器来查看是否可以找到一些提示，但事实证明这几乎是不可能的，因为智能感知下拉列表一旦失去焦点就会消失。
如有任何提示，我们将不胜感激！
更新 1
这是一个带有更大编辑器的屏幕截图，以证明下拉菜单本身似乎没有被剪裁：
更新 2
这是一个动画 gif，显示了尝试使用浏览器开发人员工具调试 HTML 元素时出现的问题：
如您所见，只要我点击其他地方，下拉菜单就会消失。
下拉列表在编辑器边界处被剪裁。我真的很想知道你怎么能看到编辑器之外的最后一个空白部分。
检查：使用浏览器的开发工具查看容器如何重叠。这将避免编辑器隐藏下拉列表。
更新
更新后，我认为现在样式不知何故搞砸了。您将不得不想出一种方法来显示弹出窗口并仍然在开发人员工具中导航 DOM 树。尝试找到父级并查看该弹出窗口是否只是隐藏的（它仍然显示在树中）或者它是否是动态创建的或者是一个门户，它位于树的完全不同的部分。
如果无法做到，请尝试禁用所有 CSS，看看是否能解决问题。如果是这样启用 CSS 一块一块地找到罪魁祸首。
此问题来自一个相当普遍的 css class 正在使用：.tree。例如，诸如 tailwindcss 之类的库会为其添加 padding-bottom。为了撤消它为 monaco 编辑器添加的一些内容，我们将以下内容添加到我们的 css 文件中：
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
并为其他库和样式制品找到该解决方案：
本来应该很容易的，但是当我们试图观察它时，建议对话框有隐藏的趋势。所以我和一个 UI 的人花了一些时间浏览剧本来尝试调试它。检查它的唯一成功方法是通过 运行 滥用 JS 调试器（这是来自堆栈溢出的提示 post 我正在努力寻找信用），并且只是导致 JS引擎暂停：
运行:
setTimeout(5000);
这给了我们 5 秒的时间来让建议 window 显示（或设置为解决问题的相对时间）。之后，您几乎可以通过快捷方式正常检查它：
ctrl+shift+c 调出调试器元素选择器。
到了，建议来自以下post：
How can I inspect disappearing element in a browser?
break on subtree 可能会奏效，但我们在逐步完成更改时变得有点不耐烦。 ctrl+ / 在这种情况下似乎没有帮助，这让奇怪的 setTimout 来挽救这一天。
我将 Monaco Editor 0.22.3 与 StencilJS 和 TailwindCSS 结合使用。一切都很好，除了智能感知下拉菜单中令人讨厌的视觉故障，如下所示：
如您所见，最后一个建议的项目被部分遮盖了。 我怀疑这可能与来自 TailwindCSS 的某些样式有关，但我几乎无计可施。我尝试使用 F12 元素检查器来查看是否可以找到一些提示，但事实证明这几乎是不可能的，因为智能感知下拉列表一旦失去焦点就会消失。
如有任何提示，我们将不胜感激！
更新 1
这是一个带有更大编辑器的屏幕截图，以证明下拉菜单本身似乎没有被剪裁：
更新 2
这是一个动画 gif，显示了尝试使用浏览器开发人员工具调试 HTML 元素时出现的问题：
如您所见，只要我点击其他地方，下拉菜单就会消失。
下拉列表在编辑器边界处被剪裁。我真的很想知道你怎么能看到编辑器之外的最后一个空白部分。
检查：使用浏览器的开发工具查看容器如何重叠。这将避免编辑器隐藏下拉列表。
更新
更新后，我认为现在样式不知何故搞砸了。您将不得不想出一种方法来显示弹出窗口并仍然在开发人员工具中导航 DOM 树。尝试找到父级并查看该弹出窗口是否只是隐藏的（它仍然显示在树中）或者它是否是动态创建的或者是一个门户，它位于树的完全不同的部分。如果无法做到，请尝试禁用所有 CSS，看看是否能解决问题。如果是这样启用 CSS 一块一块地找到罪魁祸首。
此问题来自一个相当普遍的 css class 正在使用：.tree。例如，诸如 tailwindcss 之类的库会为其添加 padding-bottom。为了撤消它为 monaco 编辑器添加的一些内容，我们将以下内容添加到我们的 css 文件中：
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
并为其他库和样式制品找到该解决方案：
本来应该很容易的，但是当我们试图观察它时，建议对话框有隐藏的趋势。所以我和一个 UI 的人花了一些时间浏览剧本来尝试调试它。检查它的唯一成功方法是通过 运行 滥用 JS 调试器（这是来自堆栈溢出的提示 post 我正在努力寻找信用），并且只是导致 JS引擎暂停：
运行:
setTimeout(5000);
这给了我们 5 秒的时间来让建议 window 显示（或设置为解决问题的相对时间）。之后，您几乎可以通过快捷方式正常检查它：
ctrl+shift+c 调出调试器元素选择器。
到了，建议来自以下post： How can I inspect disappearing element in a browser?
break on subtree 可能会奏效，但我们在逐步完成更改时变得有点不耐烦。 ctrl+ / 在这种情况下似乎没有帮助，这让奇怪的 setTimout 来挽救这一天。