Little problem with Keyboard and Ion-scroll


#1

Hey guys!

I am building an app in which user will be able to message another user. The following picture is a picture of a chat view: the first one without keyboard on, the second one with the keyboard on.

My html for the following view looks as follows:

<ion-view>
<ion-nav-bar class="bar-stable">
    <h1 class="title ng-binding" style="margin-left: 15%;">{{name}}</h1>
</ion-nav-bar>
    <ion-scroll direction="y" style="height: 100%; margin-left:7px; margin-right: 7px; bottom: 75px;">
        <div style="height: 120px"></div>
<div class="inbox-chat" style="position: relative" ng-repeat="text in message">
    <ol>
        <li ng-repeat="core in text.Messages" ng-class="{'user_message': core.sender === userId, 'other_message': core.sender !== userId}">
            <div class="messages-chat">
                {{core.message}}
            </div>
        </li>
    </ol>
</div>
    </ion-scroll>
        <div class="tools-message">
        <div class="sendText_chat">
            <input type="text" name="messageContent" ng-model="messageContent" placeholder="Message" required style="position:relative;  bottom: 10px;"/>
        </div>

        <button class="messageSend_chat" ng-click="sendMessage()"> Send! </button>
        <div class="back-button-message"><button back-button>Back</button></div>
        </div>

My question: how can I improve my code so that the entire tools-message div is above keyboard? I’ve placed it outside ion-scroll because I couldn’t find it any other way to make is stay in one place only.


#2

Read the Ionic docs here. :smile: