Have layout overlapped by keyboard


#1

Hello!
My app views are structured with a custom component that serves as menu that should be anchored at the bottom.
What happens is that whenever the keyboard is triggered this component gets shifted above the keyboard (which is intended behaviour for textfields etc)
How do I prevent this from happening to my component?
This is how the menu component is currently implemented:

<DockLayout>
    <FlexboxLayout alignItems="center" justifyContent="space-between" dock="bottom">
        <Image></Image>
        <Image></Image>
        <Image></Image>
        <Image></Image>
    </FlexboxLayout>
</DockLayout>

And this is how it’s used in the main component:

<ActionBar class="action-bar">
  <app-action-bar></app-action-bar>
</ActionBar>
  <router-outlet row="0"></router-outlet>
<GridLayout rows="*,60 ">
  <StackLayout row="1">
    <app-navigation></app-navigation>
    
  </StackLayout>
</GridLayout>

How can I solve this?


#2

That’s the behavior of Android, you can customize that by setting preferred value to windowSoftInputMode.

https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

I guess setting it to adjustPan will give what you are looking for, in NativeScript you can customize that in AndroidManifest.xml found at ./app/App_Resources/Android


#3

Be aware that when you change it in manifest file, you are applying that behavior to your entire app.


#4

Hi Manoj!
Thanks for your reply!
Are you sure this is what it is referring to?
I’ll upload a picture of the behaviour so it’s easier to see what’s going on


As you can see there’s a component just above the keybord that I would like to stay docked at the bottom hidden by the keyboard while still shifting the textview above when it gets focused.

Do you think adjustPan does that? Because from the link you sent me it didn’t sound like my case.
Let me know if you have any ideas.


#5

I use android:windowSoftInputMode=“adjustPan” in my apps. One of my app has custom tab bar docked at bottom, something that should not resize / moved above keyboard and it just works as expected.


#6

Thanks bro! I solved it :clap: