Is it possible to have a row height and resizeable set to auto for a kendo-textarea?

[Hazel]

I have been using the kendo-textarea component, and I saw that it had the functionality to set a default row height, and autosize depending on its contents: https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/sizing/

 

However, I wish to do both. That is, I would like to set my default row height so that row=5, and autosize depending on the contents of the textarea. Is this possible? I tried it out with both my code and editing your autosize example using Stackblitz, however, it doesn't seem to be able to do both:

 

 

Is it possible to do both? Please advise.

 

Many thanks,

Hazel

[Slavena]

Hi Hazel,

Thank you for the provided screenshot.

Since the auto-resizing adjusts the height of the TextArea, setting the resizable property to auto would take precedence over the rows property. As a workaround I would suggest applying custom CSS styling to the TextArea in order to set its min-height property:

.customClass {
   min-height: 100px;
 }

Here is an example demonstrating this approach:

https://stackblitz.com/edit/angular-kew5j5?file=app/app.component.ts

I hope this helps. Let me know if I can further assist you on this case.

Regards,
Slavena
Progress Telerik

[Hans-Werner]

The Example (https://stackblitz.com/edit/angular-kew5j5?file=app/app.component.ts) does not work. The  custom class did not change the height.

The Style for the kendo-textarea is always 'overflow-y: hidden; height: 42px;'.

How can i change the height?

 

Many Thanks,

Hans-Werner

 

 

 

[Slavena]

Hi Hans-Werner,

The example uses latest version of Kendo Themes and an old version of the Inputs package (v7.3.0). The versions are now incompatible, thus the discrepancy.

Due to recent rendering changes applied to the TextArea, the custom height style should be applied to the .k-input-inner element. Additionally, the encapsulation mode should be set to ViewEncapsulation.None.

Here is the updated example with latest version of the Inputs package:

https://stackblitz.com/edit/angular-nnh4rv-ad55n9?file=src%2Fapp%2Fapp.component.ts 

I hope this helps.

Regards,
Slavena
Progress Telerik