Collapsing or expanding panel causes page jump to top on mobile devices

[Trent]

I have a Panelbar on a website I'm developing, with a large number of panels (dynamic, but it can be up to 12); most of these panels contains Kendo Grids, but some contain just text. On mobile devices, I've found that expanding or collapsing a panel that contains a Grid, will cause the page to jump to the top. Since the panels are a bit further down the page, we're finding this to be really annoying. It does not happen on a desktop screen though, even if I shrink the window down to about a mobile size (it does happen when I use Chrome's mobile emulation setting, however). Is there a way that I can prevent this from happening?  Thank you.

 

Trent

[Konstantin Dikov]

Hi Trent,

I have tested the scenario in question, but I was not able to replicate such issue in the Chrome emulator. Following is a dojo example of the scenario that I have tested:

• http://dojo.telerik.com/iFUho/2

If the above works correctly on your side too, please try to modify it, so it could replicate the issue.


Regards,
Konstantin Dikov
Telerik

 

 

[Trent]

Thank you very much for your response.  I played around with your Dojo example, and was able to replicate the issue using the Chrome emulator, by modifying the code to better match our actual environment.  The issue still doesn't occur when running "normally", only when using the Chrome mobile emulator.  The changes I made are as follows:

- Added a meta "viewport" tag into the header

- The Grid is initialized from an existing HTML table, as opposed to dynamically from a datasource into a div tag.

- Added two columns to the grid, one of which is hidden, and added set widths to the columns so it will scroll horizontally.

These changes are saved in the Dojo link, the new link is here: http://dojo.telerik.com/iFUho/4 .  

 

Thank you very much for your time!

Trent

[Konstantin Dikov]

Hello Trent,

Using the modified example I was able to replicate the issue, which after long debugging proved to be related to the collapse/expand jQuery animation and the fact that the content of the panels that causes the problem are with width that exceeds the width of the container. An easy workaround for this would be to stop the animation fort he PanelBar:

$("#panelbar").kendoPanelBar({
    animation: false
});

On a side note you can take a look at the following help article, where you will find the correct way for initializing Grid in PanelBar:

• http://docs.telerik.com/kendo-ui/controls/navigation/panelbar/how-to/initiliaze-grid-in-panelbar

Best Regards,
Konstantin Dikov
Telerik