How to change height and width of Document Editor component

5 Apr 20222 minutes to read

This article explains how to change height and width of Document editor.

Change height of Document Editor

DocumentEditorContainer initially renders with default height. You can change the height of document editor using height property, the value which is in pixel.

CSHTML

@Html.EJS().DocumentEditorContainer("container").Height('590px').EnableToolbar(true).Render()

Similarly, you can use height property for DocumentEditor also.

Change width of Document Editor

DocumentEditorContainer initially renders with default width. You can change the width of document editor using width property, the value which is in percent.

CSHTML

@Html.EJS().DocumentEditorContainer("container").Width('100%').EnableToolbar(true).Render()

Similarly, you can use width property for DocumentEditor also.

Resize Document Editor

Using resize method, you change height and width of Document editor.

CSHTML

<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
</div>
<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        setInterval(() => {
          updateDocumentEditorSize();
        }, 100);
        //Adds event listener for browser window resize event.
        window.addEventListener('resize', onWindowResize);
    }
    function onWindowResize() {
        //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
        updateDocumentEditorSize();
    }
    function updateDocumentEditorSize() {
        //Resizes the document editor component to fit full browser window.
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        container.resize(windowWidth, windowHeight);
    }
</script>