Native Google Maps: iPhone X bottom whitespace

Ionic Native
1

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

25%20AM
Screen Shot 2018-06-29 at 11.43.25 AM.jpg1496×1388 382 KB

2

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

3

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

4

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.

5

The solution was …

tabs/tabs.ts

    this.events.subscribe('hideTabs', () => {
      this.visible=false;
    });
    this.events.subscribe('showTabs', () => {
      this.visible=true;
    });

tabs/tabs.html

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

app/app.scss

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