CodeMirror не будет изменять размер по вертикали - PullRequest
0 голосов
/ 01 ноября 2018

Мне нужно сделать подсветку синтаксиса в angular. Я использую ui-codemirror, но не могу изменить размер по вертикали. CodeMirror открывается с помощью кендо-окна и динамически изменяет размер, когда я изменяю размер окна по горизонтали, но когда я хочу изменить размер окна по вертикали, он сохраняет ту же высоту, что и при его создании.

У меня есть директива 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%, как я сделал с шириной, но он не изменил размер и просто разбил окно Resized window

...