Keyboard overlapping form fields

I am on the latest available version of everything, using ionic, cordova and angular. I found that the scrolling of a form in response to a keyboard had stopped working.

I found that I needed to add preference name=“resizeOnFullScreen” value=“true” to config.xml to correct an angular bug. This cured the scrolling problem but hid the buttons at the bottom of all screens.

These are of the form:

<ion-footer [ngClass]=“segmentActive ? ‘hide’ : ‘display’”>
<ion-segment [(ngModel)]=“segment” (ionChange)=“segmentSelected($event)”>

EDIT



I found that they would often re-appear if they were touched with a finger. However I needed a more permanent solution.

I then found that I could make the buttons reappear by changing the css.

Originally the css was:

ion-footer {
background-color: #5f8fb0;
ion-segment {
ion-segment-button {
min-height: 2.0rem;
height: 2.4rem;

By changing the min-height to 5.0rem and the height to 6.0rem I found that the buttons re-appeared at the bottom of the screen. This is not perfect but better than guessing where to touch.

This has only been tried on an Android phone. It worked perfectly even before on the web simulation.

If anyone has better ideas then please let me know.

Otherwise I hope that this is useful to people. It took me several days to work it all out.

Regards,

Peter.

I have discovered that this is because something is interfering with the android system navigation buttons or full screen indicator that are located at the bottom of the screen on modern android phones. On the more modern phones, i.e android 11 on miui 12 this causes the size of the screen to increase.

If these features are disabled so that android displays nothing at the bottom of the screen then the ionic buttons within the ion-footer display properly.

When will this get sorted out? We cannot be telling all our users to configure their phones a specific way in order for the app to work properly.

Or can someone tell me how I can detect whether the phone is using system navigation buttons or a full screen indicator.

Then I could write my own code to avoid the problem.

Please response!!!