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.

 

 

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:


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


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