Stretch (kendo-) textarea to parent hight

[Simon]

Hello,

I want to stretch the textarea to it's full parent height, without the dragable reziser and the parent is a flexbox.
What is the best way to achive it? Do I have to edit the underlying textarea css?

 

Setting the kendo-textarea to `flex: 1` stretches only the kendo element not the textarea inside.

Example: stackblitz

 

EDIT: Scribble for better understanding

[Stoyan]

Hi Simon,

Thanks for the provided information and snapshots.

To stretch the content of the Kendo Textarea to the parents' full height, the resizable input property can be used. In this scenario, the value of the resizeable property can be set to auto which specifies whether the TextArea component will adjust its height automatically, based on the content.

Please see the following StackBlitz demo that demonstrates the desired behavior:

https://stackblitz.com/edit/angular-kew5j5-8fefaq

I hope this helps. If any other questions come to mind, please do not hesitate to address them to us.

Regards,
Stoyan
Progress Telerik

[Simon]

Thank you for your awnser. .I wasn't clear enoough what I wanted. So I made a scribble to show better what I'm wanting. Hope this helps to understand it better. 

In my project your anwsner let the textarea resize it's parent what I don't want. And it's not fully clickable when there is not enough text.

Currently using "@progress/kendo-angular-inputs": "^7.3.1" - stackblitz uses an older version but it looks it has the same behavior. 

[Stoyan]

Hi Simon,

This question seems to be answered in the following ticket id: 1538297 - https://www.telerik.com/account/support-tickets/view-ticket/1538297. If you have any follow-up questions, please address them in the private support ticket.

I will also provide the answer from the private ticket here for public knowledge:

Indeed setting only the kendo-textarea to flex: 1 stretches the kendo element. In the StackBlitz demo, I can see that the right approach was taken but is missing a little piece and that is to target the .k-input CSS class which is set on the actual text area and set the flex: 1.

I've prepared a short StackBlitz demo that demonstrates the desired behavior:

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

I hope this helps.

Regards,
Stoyan
Progress Telerik