How to Resize in ASP.NET MVC DOCX Editor

27 Aug 20262 minutes to read

This article explains how to change the height and width of the DOCX Editor.

Change the height of the DOCX Editor

The DocumentEditorContainer initially renders with the default height. You can change the height of the DOCX Editor using the height property, the value of which is in pixels.

CSHTML

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

Similarly, you can use the height property for the DocumentEditor also.

Change the width of the DOCX Editor

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

CSHTML

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

Similarly, you can use the width property for the DocumentEditor also.

Resize the DOCX Editor

Using the resize method, you can change the height and width of the DOCX 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>