3 Replies Latest reply on Jun 2, 2016 5:39 AM by gmugmu

    How to Resize the Cordova Webview in iOS?

    gmugmu Level 1

      I'm following the documentation on this page:
      Embedding the Webview | PhoneGap Docs

       

      I used the cocoa pods approach and I'm using swift and the latest xcode version with the sample ios phone gap project, so cordova 4.01.

       

      The app runs fun and all the test JS->Native communications seem to work fine too.  The problem however is that I can't resize the webview so I can place other native controls on the screen.  I'm trying to resize the webview to allow for some space at the top and bottom of the screen for native controls.

       

      It works if I comment out the "cordova-plugin-wkwebview-engine" plugin from cordova-plugins.js in the sample ios phone gap project, but then of course, none of the other functions work.  Also, it appears to load correctly sized initially, but then flickers and the webview goes full screen again.

       

      I notice that even the demo video provided in the documentation has the same problem, but it appears to be not mentioned or ignored in the video.

       

      See:

      swift-cordova-demo - YouTube

       

      Please help with this question and then update the documentation/video accordingly.  Thanks so much!

       

      Here is the code in my custom view controller that extends the CDVViewController:

       

      import UIKit

       

      class GolfViewController: CDVViewController {

       

        override func viewDidLoad() {

          super.viewDidLoad()

       

          // Do any additional setup after loading the view.

        }

       

        override func didReceiveMemoryWarning() {

          super.didReceiveMemoryWarning()

          // Dispose of any resources that can be recreated.

        }

       

        override func viewWillAppear(animated: Bool) {

         

          self.view.backgroundColor = UIColor.blueColor()

         

          self.webView.frame = CGRectMake(self.view.bounds.origin.x,

                                          self.view.bounds.origin.y + 50,

                                          self.view.bounds.size.width,

                                          self.view.bounds.size.height - 100)

         

          super.viewWillAppear(animated);

         

        }

       

       

        /*

         // MARK: - Navigation

        

         // In a storyboard-based application, you will often want to do a little preparation before navigation

         override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {

         // Get the new view controller using segue.destinationViewController.

         // Pass the selected object to the new view controller.

         }

         */

       

      }

        • 1. Re: How to Resize the Cordova Webview in iOS?
          gmugmu Level 1

          Just giving this a bump.  Any PhoneGap experts out there that could lend a hand? Adobe staff perhaps?

          • 2. Re: How to Resize the Cordova Webview in iOS?
            kerrishotts Adobe Community Professional

            Sorry, I'm not sure how best to resize the webview when using wkwebview. What you might try instead is allow those controls to live above webview and provide appropriate margins in your web code to avoid them.

            1 person found this helpful
            • 3. Re: How to Resize the Cordova Webview in iOS?
              gmugmu Level 1

              Thanks Kerri!  I actually was thinking of doing just what you suggested as a last resort, but I managed to find discover the issue late last night...

               

              There is a cordova plugin called "cordova-plugin-statusbar", that when initialized resizes the webview frame to take full screen.  This only happens when you have <preference name="StatusBarOverlaysWebView" value="true" /> defined in the config.xml for the webview.

               

              If you either remove the plugin (not really needed for native hybrid apps anyway) or you disable the "StatusBarOverlaysWebView" preference, then the status bar plugin will not resize your webview and the size you define in "viewWillAppear" will be respected and not overridden.  This should be updated within the official phone gap documentation on embedding the web view.