CodeMirror不会垂直调整大小

Question

我需要使用angular创建一个语法高亮器，我正在使用ui-codemirror，但是不能使其垂直调整大小。当我水平调整窗口大小时，CodeMirror将用kendo-window打开并动态调整大小，但是当我想垂直调整窗口大小时，它保持与创建时相同的高度。

我有打开kendo-window的angularjs指令，这是我的代码

public link(scope, element: ng.IAugmentedJQuery): void {
        scope.popupSettings = {
            width: 765,
            visible: false,
            appendTo: '#sqlTextWindow',
        }
        scope.copyText = () => {
            let inp = $("#hiddenCopyArea");
            inp.select();
            document.execCommand('copy');
        }
        scope.openWindow = () => {
            $('#sqlTextWindow .k-window-title').empty().append(scope.data.windowTitle);
            scope.editorOptions = this.codeMirrorHelper.getSqlEditorOptions(true);
            scope.sqlTextWindow.center().open();
        }
        scope.$watch(() => { return scope.data; }, (n, o) => {
            if (scope.data == null || scope.data ==='undefined')
                return;
            scope.openWindow();

            var cm = angular.element(document.querySelector(".CodeMirror "))[0]["CodeMirror"];
            setTimeout(function () {
                cm.refresh();
            }, 500);
        })
    }

这是该指令的HTML

<div>
<div id="sqlTextWindow"></div>
<textarea class="textarea-fake" readonly id="hiddenCopyArea" ng-model="data.currentSqlText"></textarea>
<div kendo-window="sqlTextWindow"
     k-options="popupSettings">
  <p>
    <img class="copy" micon="Copy" ng-click="copyText()" alt="" />
  </p>
    <ui-codemirror id="queryTextArea"
                   name="queryTextArea"
                   rows="6"
                   class="k-textbox"
                   style="width: 100%;"
                   ui-codemirror-opts="editorOptions"
                   ng-model="data.currentSqlText" />
</div>

我尝试像设置宽度一样将高度设置为100％，但它不会调整大小，只会打碎窗户