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

ionic-v1
1

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-model="comment.value" 
                      placeholder="Enter a comment">
            </textarea>
        </label>
        <button class="button button-clear button-positive" ng-click="enterComment()">
            Post
        </button>
</ion-footer-bar>

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

2

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.

3

@Mik378 @brandyshea

Check out this madness I hacked up - Ionic Elastichat - Chat Demo w/ Auto Resizing Textarea

4

Wonderful ! Thanks !

5

Amazing Solution, thanks a lot for this

6

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:

7

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…

8

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;
}