How can i make an input position fixed buttom like WhatsApp Chat interface

ionic-v1
1

Hello guys,
I’m developping a chat app, in chat view i have an input where the user enter his message and a button to send and a ul tag to append messages sent or recieved, when the input gets the focus ionic pops it up to show the keyboard and push all messages up, what i really want is when the input lose focus, the input goes back to position fixed buttom and make ul tag only scrollable ?

<ion-content class="has-header">
        <ul class="chats">

        </ul>
    <div class="chat-form">
        <div class="input-cont">
            <textarea id="message-input"  class="form-control"  cols="30" rows="2"></textarea>
        </div>
        <div class="btn-cont" ng-click="sendMessage(messageBody)">
            <span class="arrow"></span>
            <a href="" class="btn blue icn-only">
                <i style="font-size: 20px;" class="ion-paper-airplane"></i>
            </a>
        </div>
    </div>
</ion-content>
2

Maybe you can use the ionic footer ?

3

When i put the textarea in ionic footer if it gets the focus it doesn’t get pushed up to show up the keyboard !!!

1 Like
4

Check out keyboard-attach

http://ionicframework.com/docs/api/directive/keyboardAttach/

5

You need to see this chat template! :smiley: http://market.ionic.io/plugins/ionic-elastichat-images

6

is there something similar for Ionic 2/3?