In order to make a tchat, I made a textarea in a ion-footer using this great directive: angular-elastic : <ion-footer-bar align-title="left" keyboard-attach class="comment-input-item item-input-inset"> <label class="item-input-wrapper"> <textarea type="text" msd-elastic="\n" ng-…

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 …

@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: …

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 <ion-footer class="comments-page-footer"> ... </ion-footer> 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	2755	September 21, 2016
Growing text area in footer ionic-v1	1	2765	December 23, 2014
Elastic ion-textarea ionic-v3	12	25338	August 22, 2017
Strange behaviour of ion-textarea with auto-grow Ionic Framework	4	5277	October 16, 2019
Dynamic ion-footer content ionic-v1	1	2401	July 6, 2015

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

Related topics