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.
