Search results

Resize document editor in React DocumentEditor component

08 Dec 2022 / 2 minutes to read

In this article, we are going to see how to change height and width of Documenteditor.

Change height of Document Editor

DocumentEditorContainer initially render with default height. You can change height of documenteditor using height property, the value which is in pixel.

The following example code illustrates how to change height of Document Editor.

Copied to clipboard
 <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          this.container = scope;
        }}
        height={'590px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        enableToolbar={true}
      />

Similarly, you can use height property for DocumentEditor also.

Change width of Document Editor

DocumentEditorContainer initially render with default width. You can change width of documenteditor using width property, the value which is in percent.

The following example code illustrates how to change width of Document Editor.

Copied to clipboard
 <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          this.container = scope;
        }}
        width={'100%'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        enableToolbar={true}
      />

Similarly, you can use width property for DocumentEditor also.

Resize Document Editor

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

The following example code illustrates how to fit Document Editor to browser window size.

Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
export class App extends React.Component<{}, {}> {
  container: DocumentEditorContainerComponent;
  onCreate(): void {
    setInterval(() => {
      this.updateDocumentEditorSize();
    }, 100);
    //Adds event listener for browser window resize event.
    window.addEventListener('resize', this.onWindowResize.bind(this));
  }
  onWindowResize() {
    //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
    this.updateDocumentEditorSize();
  }
  updateDocumentEditorSize() {
    //Resizes the document editor component to fit full browser window.
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    this.container.resize(windowWidth, windowHeight);
  }
  render() {
    return (
      <DocumentEditorContainerComponent
        id="container"
        ref={(scope) => {
          this.container = scope;
        }}
        height={'590px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        enableToolbar={true}
        created={this.onCreate.bind(this)}
      />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));