iPhone X header and bottom tabs

ionic-v1
1

I’m updating an ionic 1 app, and need to make it compatible with iphoneX as apparently updates will be rejected unless it runs at full screen. I’ve followed the checklist, using 1.3.5 with cordova-ios 4.5.1 and the latest statusbar plugin. I can get it running using the full space but am having issues with the spacing of the header and bottom tabs. Here’s a screenshot:

15%20PM
Screen Shot 2018-03-08 at 1.59.15 PM.png415×897 21.3 KB

As you can see the header title and buttons extend up into the statusbar a bit too much. The bottom tabs are obscured by the mic (or whatever that bar is).

I tried a starter and the bottom tabs are obscured there too.

07%20PM
Screen Shot 2018-03-08 at 1.56.07 PM.png408×893 31.2 KB

Any suggestions?

2

In case anyone else comes across this - upgrading ionic 1 didn’t update the css files. So I created a new project specifically at v1.3.5 and just copied the css over. Now it’s fine.

1 Like
3

Hi there. How do you create a project specifically at 1.3.5?