This question is locked. New answers and comments are not allowed.
MoriartyX64
Top achievements
Rank 1
Rank 1
MoriartyX64
asked on 23 Apr 2014, 11:48 AM
There seems to be a major issue with the InAppBrowser that doesn't respect the project's orientation fixes. See also CB-5649 InAppBrowser overrides App's orientation. This can be reproduced on an iOS7 device itself, but not in the AppBuilder simulator.
Basically, if you have a portrait fixed orientation and use the InAppBrowser the latter will allow you to rotate, for example, 90 degrees clockwise. Upon closing the InAppBrowser, the Kendo View will be totally distorted (half screen rendered, toolstrip half way the screen etc.).
Now the issue seems to be resolved in the Cordova core, but perhaps there is a workaround for now? For example, is there someway to "redraw" the underlying screen on the close event of the InAppBrowser? Or perhaps other quickfixes?
Basically, if you have a portrait fixed orientation and use the InAppBrowser the latter will allow you to rotate, for example, 90 degrees clockwise. Upon closing the InAppBrowser, the Kendo View will be totally distorted (half screen rendered, toolstrip half way the screen etc.).
Now the issue seems to be resolved in the Cordova core, but perhaps there is a workaround for now? For example, is there someway to "redraw" the underlying screen on the close event of the InAppBrowser? Or perhaps other quickfixes?
5 Answers, 1 is accepted
0
MoriartyX64
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2014, 10:57 AM
In the meantime, I've tried adding the following function to the page (globally, as well as in-page):
function shouldRotateToOrientation (rotation) {
switch (rotation) {
//Portrait or PortraitUpsideDown
case 0:
case 180:
return true;
//LandscapeRight or LandscapeLeft
case 90:
case -90:
return false;
}
}
Unfortunately, this doesn't help (does nothing) and the view is still scrambled. So still looking for a fix...
function shouldRotateToOrientation (rotation) {
switch (rotation) {
//Portrait or PortraitUpsideDown
case 0:
case 180:
return true;
//LandscapeRight or LandscapeLeft
case 90:
case -90:
return false;
}
}
Unfortunately, this doesn't help (does nothing) and the view is still scrambled. So still looking for a fix...
0
Hello J,
It seems that the fix for this issue has been delivered in the InAppBrowser repo here. You can manually update your in-browser client in your project by following these steps.
Regards,
Iva Koevska
Telerik
It seems that the fix for this issue has been delivered in the InAppBrowser repo here. You can manually update your in-browser client in your project by following these steps.
Regards,
Iva Koevska
Telerik
Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!
0
MoriartyX64
Top achievements
Rank 1
Rank 1
answered on 28 Apr 2014, 10:45 AM
Thanks, Iva. Using the provided instructions I see the InAppBrowser now respects the orientation settings from the app in iOS.
However, when loading an external video in the InAppBrowser (using '_blank'), the user is still allowed to rotate the video when the player steps in. Although this is certainly desired behavior, on returning to the app (closing the InAppBrowser), the main layout is still scrambled due to this.
Any suggestions on how to fix this?
However, when loading an external video in the InAppBrowser (using '_blank'), the user is still allowed to rotate the video when the player steps in. Although this is certainly desired behavior, on returning to the app (closing the InAppBrowser), the main layout is still scrambled due to this.
Any suggestions on how to fix this?
0
Hello J,
I did some digging around and it seems that this is a known issue in jQuery Mobile. The solution, however, is very simple. Make sure that in index.html, your <body> looks like this:
<body style="height:100%;min-height:100%">
If you wish, you can set it in main.css as well. Hope this helps.
The setup on which this worked for me is the following:
Kendo UI Mobile-template based project
Cordova 3.2.0
InAppBrowser updated to latest from repo
Kendo UI Mobile updated to 2014.1.416 (2014 SP 1)
Regards,
Iva Koevska
Telerik
I did some digging around and it seems that this is a known issue in jQuery Mobile. The solution, however, is very simple. Make sure that in index.html, your <body> looks like this:
<body style="height:100%;min-height:100%">
If you wish, you can set it in main.css as well. Hope this helps.
The setup on which this worked for me is the following:
Kendo UI Mobile-template based project
Cordova 3.2.0
InAppBrowser updated to latest from repo
Kendo UI Mobile updated to 2014.1.416 (2014 SP 1)
Regards,
Iva Koevska
Telerik
Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!
0
MoriartyX64
Top achievements
Rank 1
Rank 1
answered on 28 Apr 2014, 03:24 PM
Excellent, Iva. The combination with updating the InAppBrowser from repo + the style fix seems to fix the issue.
For the record, I'm running the same setup (without jQuery Mobile of course), only Kendo UI Mobile still on v2013.3.1507.
Thanks!
For the record, I'm running the same setup (without jQuery Mobile of course), only Kendo UI Mobile still on v2013.3.1507.
Thanks!