problem with panel

[pritu patel]

thanks katya,It's working.But i want scroll below header it not display below header and i also add css for top:50px, for bottom of the header.
after using this code how to set panel at bottom of the header.

[Nikita]

Hi,

Please replace
Appery("panel").css("top", $(window).scrollTop());
with
Appery("panel").css("top", $(window).scrollTop() + 50);

[Yaniv]

I have panel that contains collapsible set,
I did the same, and add above JS while the main page is loaded,
I'm facing the following issues on the device (Android 4.1.2):

1. While the panel open its located on top and not 50px below,
   While I'm playing with it (i.e. scroll the panel content, rotate the device etc) the panel get to the right position.
2. While scrolling the page bellow getting scrolled and after that the panel content (its not fixed to its position and even it can be moved below its original position)

Can you please suggest what to do here?

[Yurii Orishchuk]

Hi Yaniv.

Please try following solution(without js code).

1 Delete or comment all JS and CSS code you have found on this topic.

2 Navigate to your page. And activate the panel.

3 Set "myFixedPanel" as class name for your panel. http://prntscr.com/3f1oty/direct

4 Create new CSS asset. And populate it with code below: http://prntscr.com/3f1p8l/direct

pre
code

.ui-panel.myFixedPanel{
height: auto;
min-height: 0;
position: fixed;
top: 50px;
bottom: 50px;
overflow: hidden;
}

/code
/pre

Note. You should to adjust top and bottom css styles in accordance to your needs.

Regards.

[Yaniv]

For the 1st issue I specified - I make it fixed regardless to the answer.
After doing above changes:
The issue that the panel move on screen - resolved
BUT

1. While scrolling the panel content even the page behind scrolled also.
2. While opening the last container in the panel it seems the blank size after this container is based on the previous opened container - in my case this is huge! so I have huge blank space after it
   *I notice that the CSS not getting the right importance, but even while I added them manually - facing same/even more issues.

[Yurii Orishchuk]

Hi Yaniv.

Please give us your public app link and specify steps to reproduce these problems.

Thanks.

[Yaniv]

Application shared, app name HaZohar.
In order to reproduce the problem click on the setting botton on the header, scroll the opened panel and you will see that even the main page is scrolling as well.
Inaddition, click on the 2nd collapsible set, scroll down to the bottom and now click on the 3rd collapsible set - you will see huge blank space in the panel.
If now you will click back button (or just click on the main page behind) you will see that to the main page now added blank space while it was not thete before the panel open and scrolled.
Note:

1. on the main page onLoad there is a js method that add the hieght and the top.
   The css above located at panelCSS file, just rename it to the panel name so it identify the panel

[Yurii Orishchuk]

Hi Yaniv.

You didn't done these steps:

pre
code

1 Delete or comment all JS and CSS code you have found on this topic.
http://prntscr.com/3fx66w/direct

3 Set "myFixedPanel" as class name for your panel.
http://prntscr.com/3fx4p1/direct

/code
/pre

Also you incorrectly changed a CSS rule.

So do these steps to get it work:

1 Set "myFixedPanel" as class name for your panel. http://prntscr.com/3fx5i3/direct

2 Modify your CSS in the panelCSS asset with following code: http://prntscr.com/3fx7tr/direct

pre
code

.ui-panel.myFixedPanel{

Code: Select all

 height: auto; 

 min-height: 0; 

 position: fixed; 

 top: 50px; 

 bottom: 50px; 

 /* this need to get panel scroll when content height is more than panel height. */ 
 overflow: auto; 

}

/code
/pre

3 Comment JS code from previous suggestion. http://prntscr.com/3fx6rx/direct

Regards.

[Yaniv]

Hi Yurii, Thanks for your assistance!
After follow above instructions the main page still scrolling while invoke scrolling on panel (Tested on Andorid 4.1.2).
In order to reproduce:
Open the panel,
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.
Now if you will open the 3rd collapsible set you will face the same issue as above.
(if now you will close the panel you will not see the main page since its really up there).

Please note that after this CSS while clicking on the panel button the panel content is displayed and only after that the panel slide animation happened.
While closing the panel the panel - close animation invoked and only after its done panel content disappear.

[Serhii Kulibaba]

Hello Yaniv,

Do you want add scroll to panel? Please look here: https://getsatisfaction.com/apperyio/...