Ace编辑器错误地设置其高度，直到更新宽度（Chrome）

Question

在Angular.js应用程序中，我将Ace editor嵌入到div中，我通过设置width以编程方式调整大小。

这适用于Internet Explorer和Firefox，但在Chrome中显示出一种奇怪的行为：初始化后，在大多数情况下，编辑器太高了：

ace-text-editor - div的身高326px，但周围的div只有身高262px。即使致电editor.resize(true)也无法解决此问题。但是，只要editorWindow - div的 width 发生更改（例如直接在开发人员工具中设置），高度就会自动更正，并自动更新正确地用于本次会议的其余部分。

在页面上，一些元素被懒惰加载，需要垂直空间，并导致editorWindow - div缩小 - 所以它看起来像ace-text-editor - div无法更新到那。但令我感到困惑的是，这只是Chrome中的一个问题，直到第一次加载Ace后宽度发生变化。

如果我省略了对Ace-API的所有调用，并使用div填充Ace使用的<textarea ng-model="data.core" ng-disabled="readOnly" style="width: 100%; height: 100%; resize: none">，则调整大小正常。

什么可能导致这种行为？我确定手动更改宽度不会触发我的代码中的任何事件，因为我只看resize - 整个窗口的事件。

Answer 1

不是解决方案，而是解决方法：

使用JavaScript，在每个resize事件中，获取height的{​​{1}}和width，并直接将其设置为editorWindow - {{ 1}}，然后让Ace ace-text-editor。

像这样：

div

我仍在寻找解释或真正的解决方案。

Answer 2

可以修复。您必须明确设置父级的高度。初步资料来源：

HTML：

<div class="ace-holder">
    <div class="ace-editor">
    </div>
</div>

CSS：

.ace-editor {
    width: 100%;
    height: 100%;
}

JS：

ace.edit("ace-editor");

Ace 会覆盖绑定的容器样式（在此示例中为ace-editor）并且大小丢失。要明确修复父集的大小：

.ace-holder {
    width: 100%;
    height: 100%;
}

如果你没有忘记正确设置 Ace ，那么它是有效的：

editor.setAutoScrollEditorIntoView(true);