Native Google Maps: iPhone X bottom whitespace

I have a native map in a modal controller wherein the tabs are hidden. Everything works great, but on the iPhoneX, there is some whitespace at the bottom. I know that this is basically the approach recommended by Apple’s HIG for the iPhone X, but I would like to experiment with having the map extend into the bottom safe area (since that is how non-tab content areas are displayed elsewhere in Ionic). Is there some CSS or other code I can use to override this default? cc: @wf9a5m75

I don’t know. The maps plugin just generates a map view under the map div. I can only say so that.

Ok, thanks. I’ll dig into the Ionic CSS (etc) and see if I can find anything there.

The style comes from Ionic’s main.css …

.ios .tabs:not(.tabs-ios[tabsPlacement=top]) .tabbar {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

Now I just need to figure out how to change the CSS when an event fires.

The solution was …

tabs/tabs.ts'hideTabs', () => {
    });'showTabs', () => {


<ion-tabs [ngClass]="visible ? 'not-hidden' : 'hidden'">


    ion-tabs.hidden > div.tabbar {
      padding-bottom: 0 !important;