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.
<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true height="590px"></ejs-documenteditorcontainer>
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.
<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true width="100%"></ejs-documenteditorcontainer>
Similarly, you can use width
property for DocumentEditor also.
Resize Document Editor
Using resize
method, you change height and width of Document editor.
<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>