When opening the keyboard in a NativeScript Vue chat-like app in which users can send text, the content of the page overlay the ActionBar. If users close the app and open it again, the Keyboard Input overlays the TextView component.
I was expecting to have a result like a "Fb Messenger chat" behaviour: chats to scroll up when opening the keyboard but "title" from ActionBar and TextField component stay fixed there. The actual result can be also seen from the attached image.
For fixing this issue, I have already tried: "Stop keyboard overlay when interacting with TextField in a NativeScript application"
Template Flow:
ScrollView
> StackLayout
> GridLayout
> SomeElement
> GridLayout
> TextField
I also tried (from the same guide)
Android Soft Input Mode:
android:windowSoftInputMode="stateHidden | adjustPan">
This is my code:
<template>
<Page class="page">
<ActionBar title="HHHH" class="action-bar header">
<StackLayout orientation="horizontal" height="38" alignItems="left"
class="actionBarContainer">
<StackLayout class="HLeft" style="margin-top:10;" @tap="$navigateBack">
<Label :text="back" style="font-size:27;color:#fff;"
class="font-awesome" />
</StackLayout>
<StackLayout class="HMidEdited" alignItems="left">
<Label textWrap="true" class = "action-bar-title" :text="chatRoom.chatroomName" paddingTop = "7.5%" color="white" id="searchField"></Label>
</StackLayout>
<StackLayout class="HRight">
</StackLayout>
</StackLayout>
</ActionBar>
<StackLayout ~mainContent>
<DockLayout>
<StackLayout dock="top" height="90%" width="100%" >
<ListView ref="listView" for="item in conversations"
separatorColor="transparent" id="listView">
<v-template>
<StackLayout orientation="horizontal" style="border-bottom-width:1;border-bottom-color:#E4E4E4;"
padding="10">
<StackLayout width="20%">
<Image :src="item.profilePicture"
stretch="aspectFill" class="conImg" />
</StackLayout>
<StackLayout marginLeft="10" paddingTop="3"
width="50%">
<Label :text="item.username" />
<Label :text="item.message" textWrap="true" />
</StackLayout>
<StackLayout marginLeft="10" paddingTop="3"
width="60%">
<Label :text="item.dataFormat" class="convDateOut" />
</StackLayout>
</StackLayout>
</v-template>
</ListView>
</StackLayout>
<StackLayout dock="bottom" height="10%" style="border-color:#E4E4E4;border-width:1;background:#fff;">
<StackLayout orientation="horizontal">
<StackLayout class="textItem">
<TextView v-model="message" placeholderColor="black"
:editable="isUserVerified" @tap="alertMessage" hint="Say Something" returnKeyType="send"
ios:height="30" ios:marginTop="3"
android:paddingBottom="5" class="searchField font-awesome" textWrap="true"
color="#000000" :text="message" />
</StackLayout>
<StackLayout class="send" @tap="sendTap()">
<Label text="0" android:class="notificationAndroid"
ios:class="notification" opacity="0" />
<Label text="" android:style="font-size:23;margin-top:-15"
ios:style="font-size:29;margin-top:-15"
class="font-awesome" />
</StackLayout>
</StackLayout>
</StackLayout>
</DockLayout>
</StackLayout>
</Page>
This is my code after my attempts to fix it:
<template>
<Page class="page">
<ActionBar title="HHHH" class="action-bar header">
<StackLayout orientation="horizontal" height="38" alignItems="left"
class="actionBarContainer">
<StackLayout class="HLeft" style="margin-top:10;" @tap="$navigateBack">
<Label :text="back" style="font-size:27;color:#fff;"
class="font-awesome" />
</StackLayout>
<StackLayout class="HMidEdited" alignItems="left">
<Label textWrap="true" class = "action-bar-title" :text="chatRoom.chatroomName" paddingTop = "7.5%" color="white" id="searchField"></Label>
</StackLayout>
<StackLayout class="HRight">
</StackLayout>
</StackLayout>
</ActionBar>
<ScrollView orientation="vertical" height="100%" width="100%">
<StackLayout ~mainContent>
<GridLayout rows="*,60">
<ListView ref="listView" for="item in conversations"
separatorColor="transparent" id="listView" row="0" >
<v-template>
<StackLayout orientation="horizontal" style="border-bottom-width:1;border-bottom-color:#E4E4E4;"
padding="10">
<StackLayout width="20%">
<Image :src="item.profilePicture"
stretch="aspectFill" class="conImg" />
</StackLayout>
<StackLayout marginLeft="10" paddingTop="3"
width="50%">
<Label :text="item.username" />
<Label :text="item.message" textWrap="true" />
</StackLayout>
<StackLayout marginLeft="10" paddingTop="3"
width="60%">
<Label :text="item.dataFormat" class="convDateOut" />
</StackLayout>
</StackLayout>
</v-template>
</ListView>
<StackLayout orientation="horizontal" style="border-color:#E4E4E4;border-width:1;background:#fff;" row="1">
<StackLayout class="textItem">
<TextView v-model="message" placeholderColor="black"
:editable="isUserVerified" @tap="alertMessage" hint="Say Something" returnKeyType="send"
ios:height="30" ios:marginTop="3"
android:paddingBottom="5" class="searchField font-awesome" textWrap="true"
color="#000000" :text="message" />
</StackLayout>
<StackLayout class="send" @tap="sendTap()">
<Label text="0" android:class="notificationAndroid"
ios:class="notification" opacity="0" />
<Label text="" android:style="font-size:23;margin-top:-15"
ios:style="font-size:29;margin-top:-15"
class="font-awesome" />
</StackLayout>
</StackLayout>
</GridLayout>
</StackLayout>
</ScrollView>
</Page>
And also added:
import * as app from "application"
export default {
created() {
var window = app.android.startActivity.getWindow();
window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
But it does not work since with ScrollView I'm having all the content of the page resized (screenshot attached) into a single line or still the same result that I had when I was using DockLayout.
I'm also attaching the difference of code between the one I wrote and the changes I made.
