How to show ionic footer on devices with digital buttons?

I have the problem that the ionic footer is hidden behind the digital buttons on devices that do not have physical buttons; the only way to see the ionic footer on devices with digital buttons is by turning the device to landscape.

On devices with physical buttons, the ionic footer works fine.

I am using ionic 5, cordova-android: 8.1.0.

Do you know any trick or function to make the ionic footer work well even on devices with digital buttons?

The same happened to me.

This happens when 2 configurations are combined.

The first, when you hide the status bar.
thi.statusBar.hide();

This makes the application go to full-screen mode.

And the second if in the config.xml, you have the resizeOnFullScreen property set to true.

This makes the application take the entire screen of the cell phone, leaving content behind the digital buttons.

To solve it, you can first try only commenting on the line of code that makes the application go full screen:
// this.statusBar.hide();

Run a test on the device to see if that modification was enough.

If not, uncomment the line
// this.statusBar.hide();
so that you can take advantage of the space above the status bar. (It’s optional)

Now set the resizeOnFullScreen property to false.

Thus the application will not take the full size of the screen.

2 Likes