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 when I touch the input field and keyboard pops-out.
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.
If that message input box is on <ion-footer> , you can use attribute keyboard-attach='true'
<ion-footer keyboard-attach='true' >
Make sure you are using the latest ionic version.
I've put together a small codepen sample to show how you can style the chat room and pull the input field down to the bottom. Basically you need you apply two css classes adjusting the height of your input container.
.tools-message {
position: absolute;
width: 100%;
bottom: 0;
border: solid 1px;
height: 80px;
}
.has-bottom {
bottom: 80px !important;
}