[SOLVED] Layout with new iPad Pro

Just tried to update my app with compatibility for new iPad Pro 11. On both simulator and actual device I get the corner-to-corner screen display as requested by Apple - but, the new ‘swipe up here bar’ at the screen bottom obscures the text underneath icons on bottom toolbar (see screenshot below) - any ideas for a solution?

dont have an ipad to test it. But an ugly solution, maybe add a margin-bottom: XXpx; // to html,body.
there should be a better way.

Agree a better way is needed. I guess all users of F7 who have bottom toolbars will face this issue so, hopefully, we will see a solution built in to F7?.
Meanwhile I wil try a few things and report back…

add this to your css:

.toolbar {
margin-bottom: constant(safe-area-inset-bottom) !important; /* iOS 11.0 /
margin-bottom: env(safe-area-inset-bottom) !important; /
iOS 11.2 */

1 Like