Details

    • Type: Bug
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 4.0.0
    • Fix Version/s: 4.3.0
    • Component/s: cordova-ios
    • Environment:

      iOS 9

      Description

      This is to support SlideOver and SplitView. Note that SplitView is only supported on iPad Air 2.

      The three rules are:

      1. Build your apps with the iOS 9 SDK
      2. Support all orientations
      3. Use Launch Storyboards

      We have 1 and 2 covered, but not 3.

        Issue Links

          Activity

          Hide
          shazron Shazron Abdullah added a comment - - edited

          On iOS 9 iPad Air 2:

          1. Xcode 6.x Cordova iOS 3.8.0 – launched app can Slide Over other apps (no Split View), but can't be in Slide Over/Split View pane
          1. Xcode 7.x Cordova iOS 3.8.0 – launched app can Slide Over other apps (no Split View), but can't be in Slide Over/Split View pane

          Show
          shazron Shazron Abdullah added a comment - - edited On iOS 9 iPad Air 2: 1. Xcode 6.x Cordova iOS 3.8.0 – launched app can Slide Over other apps (no Split View), but can't be in Slide Over/Split View pane 1. Xcode 7.x Cordova iOS 3.8.0 – launched app can Slide Over other apps (no Split View), but can't be in Slide Over/Split View pane
          Hide
          shazron Shazron Abdullah added a comment - - edited

          Success: https://twitter.com/shazron/status/611614233202044928

          Fix for (1) is:
          1. Use Xcode 7 (Cordova always uses the current SDK)

          Fix for (2) is:
          2. Click your Project icon in the Project Navigator
          3. Click on your Target
          4. Select the "General" tab
          5. Go to the "Deployment Info" section
          6. Select the "iPad" button segment
          7. For "Device Orientation", select all four checkboxes (Portrait, Upside Down, Landscape Left, Landscape Right)

          Fix for (3) is:
          1. Add a new File: Launch Screen --> "Launch Screen.storyboard"
          2. Click your Project icon in the Project Navigator
          3. Click on your Target
          4. Select the "General" tab
          5. Go to the "App Icons and Launch Images" section
          6. Select "Launch Screen.storyboard" from the "Launch Screen File" dropdown

          Show
          shazron Shazron Abdullah added a comment - - edited Success: https://twitter.com/shazron/status/611614233202044928 Fix for (1) is: 1. Use Xcode 7 (Cordova always uses the current SDK) Fix for (2) is: 2. Click your Project icon in the Project Navigator 3. Click on your Target 4. Select the "General" tab 5. Go to the "Deployment Info" section 6. Select the "iPad" button segment 7. For "Device Orientation", select all four checkboxes (Portrait, Upside Down, Landscape Left, Landscape Right) Fix for (3) is: 1. Add a new File: Launch Screen --> "Launch Screen.storyboard" 2. Click your Project icon in the Project Navigator 3. Click on your Target 4. Select the "General" tab 5. Go to the "App Icons and Launch Images" section 6. Select "Launch Screen.storyboard" from the "Launch Screen File" dropdown
          Hide
          shazron Shazron Abdullah added a comment - - edited

          For (1)
          we can use the <preference> tag target-device and orientation config.xml directives.

          For (2)
          We can use the <resource> tag to include the file, in a plugin (plugin.xml). Not sure yet about the "Launch Screen File" setting. It's possible we could just bake this in to the template.

          Show
          shazron Shazron Abdullah added a comment - - edited For (1) we can use the <preference> tag target-device and orientation config.xml directives. For (2) We can use the <resource> tag to include the file, in a plugin (plugin.xml). Not sure yet about the "Launch Screen File" setting. It's possible we could just bake this in to the template.
          Hide
          sravan_8 Sravan added a comment -

          Hi,

          Select dropdowns are not working in slide over and split view
          Its taking full screen .
          Could you please look into it ASAP?

          Show
          sravan_8 Sravan added a comment - Hi, Select dropdowns are not working in slide over and split view Its taking full screen . Could you please look into it ASAP?
          Hide
          blindr David Palmer added a comment -

          for #3, if one is using a splash screen, the Launch Screen just interferes with the splash screen (the splash screen image will be displayed only very briefly) which leaves one to have to design a Launch Screen storyboard?

          Show
          blindr David Palmer added a comment - for #3, if one is using a splash screen, the Launch Screen just interferes with the splash screen (the splash screen image will be displayed only very briefly) which leaves one to have to design a Launch Screen storyboard?
          Hide
          chrysanhy Chrysanthemum Hyphus added a comment -

          This works to enable SlideOver and SplitView in a minimal way, but what I really need is for the main web view to resize so the content is not chopped off.

          Show
          chrysanhy Chrysanthemum Hyphus added a comment - This works to enable SlideOver and SplitView in a minimal way, but what I really need is for the main web view to resize so the content is not chopped off.
          Hide
          shazron Shazron Abdullah added a comment -

          Not sure what you mean – the webview already dynamically resizes to the viewport. Your content needs to support responsive design so it changes with viewport size changes.

          Show
          shazron Shazron Abdullah added a comment - Not sure what you mean – the webview already dynamically resizes to the viewport. Your content needs to support responsive design so it changes with viewport size changes.
          Hide
          chrysanhy Chrysanthemum Hyphus added a comment - - edited

          Thanks so much for your response!

          The app does have responsive design, and if the app is already launched, it works as hoped:

          If I launch another app first, and then try to launch the Cordova app by choosing it to slide over, it's width is the device width, so it's chopped off on the right.

          If, however, I launch my Cordova app first, then launch another app, then slide over the already opened Cordova app, it formats for the narrower width properly.

          There was a viewport meta tag which set the width to device-width, but I took it out and it made no difference. For some reason when it first launches on being chosen as the app to slide over, it thinks the width is the whole screen.

          Show
          chrysanhy Chrysanthemum Hyphus added a comment - - edited Thanks so much for your response! The app does have responsive design, and if the app is already launched, it works as hoped: If I launch another app first, and then try to launch the Cordova app by choosing it to slide over, it's width is the device width, so it's chopped off on the right. If, however, I launch my Cordova app first, then launch another app, then slide over the already opened Cordova app, it formats for the narrower width properly. There was a viewport meta tag which set the width to device-width, but I took it out and it made no difference. For some reason when it first launches on being chosen as the app to slide over, it thinks the width is the whole screen.
          Hide
          shazron Shazron Abdullah added a comment - - edited

          Ah ok, I see the difference now, thanks – tricky. Not sure how to fix this one yet.

          May be: http://stackoverflow.com/a/31542613

          Show
          shazron Shazron Abdullah added a comment - - edited Ah ok, I see the difference now, thanks – tricky. Not sure how to fix this one yet. May be: http://stackoverflow.com/a/31542613
          Hide
          ghenry22 Gaven Henry added a comment -

          http://en.gg/enable-ipad-split-screen-feature-in-an-ionic-or-cordova-app/

          Found this reference while doing some research about this. Might be helpful. It would be great to find a simple way to get this support in place.

          Show
          ghenry22 Gaven Henry added a comment - http://en.gg/enable-ipad-split-screen-feature-in-an-ionic-or-cordova-app/ Found this reference while doing some research about this. Might be helpful. It would be great to find a simple way to get this support in place.
          Hide
          kizumi Kouichi Izumi added a comment -

          Hi.
          Which version does it include the fix to support Split View on iOS?
          Our customer expects that a cordova application can use SpitView on iOS as soon as possible.

          Show
          kizumi Kouichi Izumi added a comment - Hi. Which version does it include the fix to support Split View on iOS? Our customer expects that a cordova application can use SpitView on iOS as soon as possible.
          Hide
          jonathanli Jonathan Li added a comment -

          Testing on this issue shows the ipad pro webview multitask resizing issue is caused by statusbar plugin. The ios statusbar plugin currently uses the device screen bounds as the application's UI bounds, which will set the webview frame to the device screen bound by mistake when ipad pro is in splitview or slideview state.

          After replacing the device screen bounds with the UIWindow bound, then the resizing works in ipad pro splitview and slideview as expected.

          A pull request has been submitted for reference at
          https://github.com/apache/cordova-plugin-statusbar/pull/62
          (only tested in the cordova project I am working on)

          There maybe similar code in other plugins that still uses device screen bound as the application bounds, and they will also need to be updated to make ipad pro multitask slideview and splitview work. Actually, I wonder it is better to avoid explicitly setting the UIWebView's frame at all, and instead just defining the related constraints when creating the webview, and then let the ios auto layout to handle the webview resizing after statusbar or navigationbar state is changed by application's code.

          Show
          jonathanli Jonathan Li added a comment - Testing on this issue shows the ipad pro webview multitask resizing issue is caused by statusbar plugin. The ios statusbar plugin currently uses the device screen bounds as the application's UI bounds, which will set the webview frame to the device screen bound by mistake when ipad pro is in splitview or slideview state. After replacing the device screen bounds with the UIWindow bound, then the resizing works in ipad pro splitview and slideview as expected. A pull request has been submitted for reference at https://github.com/apache/cordova-plugin-statusbar/pull/62 (only tested in the cordova project I am working on) There maybe similar code in other plugins that still uses device screen bound as the application bounds, and they will also need to be updated to make ipad pro multitask slideview and splitview work. Actually, I wonder it is better to avoid explicitly setting the UIWebView's frame at all, and instead just defining the related constraints when creating the webview, and then let the ios auto layout to handle the webview resizing after statusbar or navigationbar state is changed by application's code.
          Hide
          jonathanli Jonathan Li added a comment -

          Just want to mention, the fix (2) also needs to update the project's info plist file to indicate the app does not require the full screen as shown below

          <key>UIRequiresFullScreen</key>
          <false/>

          Jonathan

          Show
          jonathanli Jonathan Li added a comment - Just want to mention, the fix (2) also needs to update the project's info plist file to indicate the app does not require the full screen as shown below <key>UIRequiresFullScreen</key> <false/> Jonathan
          Hide
          githubbot ASF GitHub Bot added a comment -

          Github user shazron commented on the issue:

          https://github.com/apache/cordova-plugin-statusbar/pull/62

          @jonathanli2 Please update the prefix to the title of this PR from "CB:-9161" to "CB-9161". Any comments on this PR are not reflected in JIRA because of this typo. Thanks!

          Show
          githubbot ASF GitHub Bot added a comment - Github user shazron commented on the issue: https://github.com/apache/cordova-plugin-statusbar/pull/62 @jonathanli2 Please update the prefix to the title of this PR from "CB:-9161" to " CB-9161 ". Any comments on this PR are not reflected in JIRA because of this typo. Thanks!
          Hide
          shazron Shazron Abdullah added a comment -

          Kerri Shotts is this issue covered by your work in CB-9762?

          Show
          shazron Shazron Abdullah added a comment - Kerri Shotts is this issue covered by your work in CB-9762 ?
          Hide
          kerrishotts Kerri Shotts added a comment -

          It is. CB-10288 is only tangentially related and doesn't directly relate to the issue description. It does change how the status bar width is calculated in the status bar plugin (viewport instead of screen), but I wouldn't consider it blocking for this issue, IMO.

          I'm going to go ahead and resolve; if anyone wants to reopen the issue, we can.

          Show
          kerrishotts Kerri Shotts added a comment - It is. CB-10288 is only tangentially related and doesn't directly relate to the issue description. It does change how the status bar width is calculated in the status bar plugin (viewport instead of screen), but I wouldn't consider it blocking for this issue, IMO. I'm going to go ahead and resolve; if anyone wants to reopen the issue, we can.

            People

            • Assignee:
              shazron Shazron Abdullah
              Reporter:
              shazron Shazron Abdullah
            • Votes:
              4 Vote for this issue
              Watchers:
              13 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development