Skip to main content

Let users resize the rich text editor in ASP.NET Core

The editor with a formatted document

The right height for an editor depends on what people write, and you do not know that in advance. Let them drag it to the size they need.

The attribute

<richtextbox name="Body"
             toolbar="default"
             width="100%"
             height="300px"
             resize-mode="height"></richtextbox>
resize-modeWhat people can do
heightDrag it taller or shorter. The best choice for most forms
bothChange the height and width
noneKeep the size you set

Each has a demo: height, both and none.

The starting size

width and height take CSS lengths. width="100%" makes it fill its container and follow the page as it changes, and that is usually what you want. A fixed width="800px" can make a phone's page scroll sideways.

Why not both?

A wider editor can break out of your page's column, so both suits a full-page tool better than a form. On a form, use height.

A different need: more room for a moment

If people occasionally need a lot of room, full screen gives them all of it and returns them to the page afterwards.

Does it remember?

The size lasts for that page view. To remember someone's preference, store it yourself and set the height attribute from your own code.

Read next