How do you set the height/# rows of editor

[n/a]

I am unable to determine how to set the height of the editor.  Additionally, it would be nice if it would autosize, increase height upon entering text.

 

 

[Martin]

Hi John,

Indeed, there is no built-in property which allows us to set the height of the Editor component. However, the dimensions can be changed with a custom CSS styles. I am not sure that I understand correctly which height should be changed - of the text area or the height of the whole Editor wrapper:

- to change the height of the Editor an inline CSS style can be used:

<kendo-editor [value]="value" style="height: 300px;">
</kendo-editor>

- to change the height of the content only, the following CSS can be used:

 .k-editor .k-content {
      height: 200px;
}

A common pitfall is to forget to set Angular's ViewEncapsulation to None as otherwise the custom styles will not be applied, unless they are provided at a global level.

Here is an example that demonstrates the described approach:

https://stackblitz.com/edit/angular-7nsj5z

Additionally, the initial height of the Editor can be set by using the min-height CSS property. By design the Editor's <div> tag, which holds the content, increases its height when the entered text reaches the bottom:

The following example demonstrates an Editor with set height, which auto-resizes according to the entered text:

https://stackblitz.com/edit/angular-7nsj5z-qrunci

As a side note, check the Styling section of the Editor component:

https://www.telerik.com/kendo-angular-ui/components/editor/styling/

I hope this helps.

Regards,
Martin
Progress Telerik