Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

ios xcode capacitorjs storyboard constraint to stop status bar hanging over the top of the webview

xcode – webview content is showing in status bar

In this post, it hints that to ensure the status bar is not sitting over the webview, ie in capacitorjs’s case the app, you should add constraints to the storyboard.

However, in my xcode (latest), the storyboard for capacitor "Bridge view controller" does not allow me to apply constraints.. all the options are greyed out:

enter image description here

However, I cannot figure out how to get the ios status bar to not sit over the top of the app, and all the old Cordova and ionic methods do not appear to be working.

Whatever I do the status bar hand over the webview..
enter image description here

Any ideas or ios/capacitor js pro’s out there who could help?

Tags:

2

Answers


  1. 0

    I’m not familiar with Capacitor, but as an iOS developer a View Controller in not a visual element so it is not capable of having constraints.

    You’ll need to figure out a way to access the UIView in Capacitor and then apply constraints the the view.

    Login or Signup to reply.
  2. 0

    Capacitor uses a single ViewController where the only view is a WKWebView that is full screen, so you can’t add any constraints to it.

    What you should do to avoid the notch is to add this viewport meta tag <meta name='viewport' content='initial-scale=1, viewport-fit=cover'> to your index.html and respect the Safe Areas with the help of env() CSS function and pre-defined environment variables safe-area-inset-left, safe-area-inset-right, safe-area-inset-top and safe-area-inset-bottom as described by Apple on this article

    If your app is not going to be scrollable and you don’t want to deal with the safe areas yourself, you can alternatively set the viewport meta tag to <meta name='viewport' content='initial-scale=1, viewport-fit=contain'>
    and add this to the capacitor.config.json

    "ios": {
    "contentInset": "always"
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search