In order to make a tchat, I made a textarea in a ion-footer using this great directive: angular-elastic: Post The issue is that the footer has a fixed height, and therefore isn’t dynamically resized regarding the textarea size. Is there a way to let the footer adapt its height regarding its content? Thanks

The bar-footer has a set height of 44px. Setting the height to “inherit” will allow it to dynamically change height based on the textarea inside of it. The problem is that the .has-footer class (on the ion-content) is styled with “bottom: 44px”. Therefore if your footer changes size dynamically the content class would need to adjust the styling of the bottom for it. I made a codepen to show this. I think you could make a directive that checks the height of the footer and changes the styling of the content dynamically. Maybe look at this post and instead of modifying the “height” you could modify “bottom” as the user types. Just an idea, it will probably require a bit of work.

@Mik378 @brandyshea Check out this madness I hacked up - Ionic Elastichat - Chat Demo w/ Auto Resizing Textarea [image] Ionic Elastichat ...

amazing! thank you! problem with this one is though that if you have a long message, and then scroll completely to the bottom, the content will scroll into the message (faulty behavior). I’ve added a little more (search for ‘claw’ to see all the edits) to your great solution to account for that: [image] Ionic Elastichat Forked from [Ross Martin](http://codepen.io/rossmartin/)'s Pen [Ionic Elastichat](http://codepen.io/rossmartin/pen/XJmpQr/)....

How i can scroll de textarea when grows all the screen and i want to see the first line? The only way is deleting the text…

[image] brandyshea: codepen Fantastic, that solved my issue in Ionic 5. Thank you! This is what i did for my ion-footer in which I placed ion-text-area HTML ... SCSS .comments-page-footer { height: inherit; }

Resizable textarea in a footer. How to adapt the footer height?

ionic-v1

akmalik December 8, 2014, 3:54am 5

Amazing Solution, thanks a lot for this

Text area in ionic chat app

Topic		Replies	Views
Text area in ionic chat app ionic-v1	4	2764	September 21, 2016
Growing text area in footer ionic-v1	1	2771	December 23, 2014
Elastic ion-textarea ionic-v3	12	25381	August 22, 2017
Strange behaviour of ion-textarea with auto-grow Ionic Framework	4	5289	October 16, 2019
Dynamic ion-footer content ionic-v1	1	2412	July 6, 2015

Resizable textarea in a footer. How to adapt the footer height?

Related topics