Popup is able to be pushed up offscreen when orientation changes to landscape

Fri Jan 09, 2015 10:55 am

Hi,

I have an issue with popups that I cannot seem to fix.

My app positions all of the elements at start based upon the orientation of the phone. If the orientation changes, the elements are repositioned.

I have used the popup element throughout the app to deliver extras (e.g. traffic news).
This popup has a div element to allow scrolling inside the popup if the amount of news is greater than the height of the popup. The popup size and div size are set during orientation change or startup.

The problem I have is that in landscape mode, the user is able to scroll the information in the div, but, when the information gets to the bottom, and the user tries scrolling up even more, the whole popup moves up and almost off the screen.

This only happens on devices (im testing with the Appery tester) not on the web test).

Can someone help me with this please? I've tried positioning to different UI elements or not positioning at all, and just cannot stop this from happening.

UPDATE1:
This problem only occurs if the app is started in PORTRAIT mode and then you turn the device to landscape mode. The popup appears to believe the screen is higher than it really is.......
If you start the app in landscape mode the problem does not occur, even if you go to portrait and back to landscape again.

UPDATE2:
After further testing, I have found that on a mobile device I can tap and hold on the header of the popup and drag it up.
Is there any way to stop this?

UPDATE3:
It appears that the whole "window" that the popup sits in is scrollable, I can scroll the whole popup up and down by scrolling outside of the popup.

UPDATE4:
The (sort of) issue can be seen in the browser test as well. If you run the app and leave the orientation in portrait there are no scroll bars. If you then turn to landscape, you get them, even thought there is no data off screen.
I have manual buttons for forcing the app to format the screen as portrait/landscape while testing in the browser as it does not detect orientation.

regards

Andy.

Fri Jan 09, 2015 5:05 pm

I've managed to find a fix for this.

It looks like when the device changes orientation from portrait to landscape, the app's screen size is not updated.

This has the affect of causing various elements on the screen to believe that there is more vertical screen estate than in reality.

To fix this, add the following lines to your code that handles the change to landscape and portrait:

Code: Select all

 Appery("page_name_here").height(window.innerHeight); 
 Appery("page_name_here").width(window.innerWidth);

Not sure why the app does not do this automatically on orientation change.

regards

Andy.

Fri Jan 09, 2015 5:46 pm

Hello Andy,

Thank you for the update, sure this post will be useful for other users.

Tue Aug 04, 2015 5:58 am

Hi where should i add this code, so the app will know if the orientation changed to landscape?

Thanks,
She