I'm in the process of developing a chat application using vuejs that will be accessed through a webview on Android. I currently have an input-bx element for sending messages, but I need to find a way to ensure it remains visible when the Android keyboard pops up.
<div class="enter_msg child2" style="flex:1; bottom: 0;" >
<input class="input-bx msgara" placeholder="Tap here to start typing..." v-model="groupMsg" />
<v-btn id="grpmsg" class="send_btn" :disabled="isDisable(groupMsg)" @click="sendGroupMsg()"> <p style="margin:0">Send</p></v-btn>
</div>
.enter_msg{
display: flex;
flex: 3;
position: fixed;
width: 72%;
padding: 2% 4%;
}
.input-bx {
border: 1px solid #111;
}
.msgara{
background-color: #260b1c;
border: 1px solid #b92876;
border-radius: 2px;
width: 80%;
padding: 2%;
height: 38px;
}