How to Resize in Blazor DOCX Editor

28 Aug 20261 minute to read

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

Change height of DOCX Editor

Blazor DOCX Editor component initially renders with a default height. You can change the height of the DOCX Editor using the Height property; the value is in pixels.

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

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

Similarly, you can use the Height property for the DOCX Editor also.

Change width of DOCX Editor

Blazor DOCX Editor initially renders with a default width. You can change the width of the DOCX Editor using the Width property; the value is in percent.

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

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

Similarly, you can use the Width property for the DOCX Editor also.

Resize DOCX Editor

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