How to change height and width of Blazor Document Editor component

15 Feb 20221 minute to read

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

Change height of Document Editor

Blazor Word Processor component (a.k.a Document Editor) component initially render with default height. You can change height of document editor using Height property, the value which is in pixel.

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

    <SfDocumentEditorContainer @ref="container" EnableToolbar=true Height="590px">
    </SfDocumentEditorContainer>

Similarly, you can use Height property for Document Editor also.

Change width of Document Editor

Blazor Word Processor component (a.k.a Document Editor) initially render with default width. You can change width of document editor using Width property, the value which is in percent.

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

 <SfDocumentEditorContainer @ref="container" EnableToolbar=true Height="590px" Width="80%">
  </SfDocumentEditorContainer>

Similarly, you can use Width property for Document Editor also.

Resize Document Editor

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