Forum | Appery.io

Its a good option as well!
But we till face the following issues (as explained above):

1. The main page is scrolled as well
2. There is a blank space below the containers (total size of the panel after open and collapse getting to be more than single screen).

Page screen should reduce its height after panel closing. Please sent us preview test link, we'll test it.

Application shared (app name HaZohar).
Please keep in mind that the issue is whie the panel open as well - while scrolling the panel the main page scrolled as well)

Add event handlers for panel:

for open panel:
$("html").css("overflow", "hidden");

for close panel:
$("html").css("overflow", "scroll");

The issue still exists on device (Android 4.1.2)
Open the panel in the application,
Select the 2nd collapsible set, scroll down to the bottom of it, CONTINUE to scroll down even that you are on the bottom of it - as a result the main page (the one that behind) will be scrolled as well (the html still contains overflow: hidden but the scrolling is allowed somehow).
In addition while scrolling the panel content up its scrolled 2px on top of the header instead to scroll below the header.

Hello Yaniv,

Thank you for the update. Let us know if you need any further help.

I will apriciate additional look on the application itself to identify the solutin for this specific problem. Application is shared

Hello,

Try to use such css rules for panel:

code.ui-panel.ui-panel-open {
position:fixed;
}
.ui-panel-inner {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0px;
overflow: auto;
-webkit-overflow-scrolling: touch;
} /code

Thanks,
I did some additional changes and its working fine.
1 item I still face - while device is in landscape the back page is scrolling while I scroll the panel.
Can you tell why?
I tried to set while the panel open the mail page (HaZohar) to position fix - and its worked fine but while i tried to restore it to position: absolute (while the panel is getting closed) - the main page gets blank.

portrait working fine even while changing rotate the device many times.

Hello,

create such javacript code in event "load" of your page:

code$( window ).on( "orientationchange", function( event ) {
var height = $('[dsid="startScreen"]').css("height");
alert(height);
$('.ui-panel-dismiss.ui-panel-dismiss-open').attr('style', 'height: '+height+'px; !important');
});/code

//startScreen - name of your page