How to Resize in ASP.NET Core DOCX Editor

27 Aug 20262 minutes to read

This section explains how to change height and width of ASP.NET Core DOCX Editor (Document Editor).

Change height of DOCX Editor

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

CSHTML

<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true height="590px"></ejs-documenteditorcontainer>

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

Change width of DOCX Editor

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

CSHTML

<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true width="100%"></ejs-documenteditorcontainer>

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

Resize DOCX Editor

Using the resize method, you can change the height and width of the DOCX Editor.

CSHTML

<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>

<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>