Footer Toolbar need more spacing on iPhone X

[peterpeterparker]

Ionic version: (check one with "x")
[X ] 2.x
[ X] 3.x

I'm submitting a ... (check one with "x")
[X ] feature request

Current behavior:
After updating WkWebView and the PR for cordova-plugin-statusbar, my app fits better the iPhone X but it looks like the content of the Toolbar inside a Footer would need more bottom spaces to avoid to display the content/buttons above the home button

This occurs in case of "tabs buttons" or button or segment inside a footer toolbar (see screenshots)

Expected behavior:
On iPhone X the toolbar in footers need a bit of more (bottom) spacing

** Code **

In case of segment:

<ion-footer>
<ion-toolbar>
    <ion-segment>
        <ion-segment-button value="something">
            <ion-icon name="pin"></ion-icon>
            <span>something</span>
        </ion-segment-button>
        <ion-segment-button value="something2">
            <ion-icon name="cash"></ion-icon>
            <span>something2</span>
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>
</ion-footer>

button:

<ion-footer>
<ion-toolbar role="buttons" padding-left padding-right>
    <button ion-button (click)="doStuff()">
        Hello is it you?
    </button>
</ion-toolbar>
</ion-footer>

Other information:

[kensodemann]

Hello! Thank you for opening an issue with us!

This should be fixed in the latest nightly build of ionic-angular. Please give that build a test as outlined here: https://blog.ionic.io/ios-11-checklist/

The changes in that nightly build will also be out in the next full release of ionic-angular.

I am going to close this, but will happily reopen it if those fixes do not work for you.

Thank you for using Ionic

[peterpeterparker]

@kensodemann nope sorry it didn't solved the issue.

did all the steps described in the blog post inclusive updating to nightly, still same issue as described above. could you reopen the issue plz?

[kensodemann]

Sure thing!

Can you provide a sample application demonstrating this issue via GitHub? It worked in my sample application, but that is really just a slightly modified version of the tabs starter.

[peterpeterparker]

I could try to build one from scratch, mine is a private repo...give me a couple of minutes

[peterpeterparker]

here you go @kensodemann

https://github.com/peterpeterparker/ionic-iphonex

I only displayed the issue with ion-footer > ion-toolbar > button (see home.html)

I didn't displayed the issue with ion-footer > ion-toolbar > ion-segments, if you wish me to add it let me know

NOTE: after the git clone you still will have to patch cordova-plugin-statusbar locally (I did that locally manually)

[kensodemann]

Thank you. We will have a look.

[mhartington]

Hmm, alright I know whats up. Right now we're only applying padding to ion-tabs for the bottom. I'll add the ion-footer padding as well

[kensodemann]

@peterpeterparker - when you get a chance, can you apply the following ionic-angular build to your project and let me know if it handles the remaining issues you have?

npm install ionic-angular@3.6.1-201709221952 --save

I tried it with your sample project and it worked for that case.

[peterpeterparker]

it works like a charm, ion-footer > ion-toolbar > button or segment has now the proper size on iPhone X (and still got the proper size on iPhone 7, tested both with Xcode simulator)

thx @kensodemann @mhartington

[peterpeterparker]

@kensodemann I've the feeling that a same improvement should be applied to action sheets

Therefore I opened a new feature issue: #12956