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

4 posts, 0 answers
  1. Trent
    Trent avatar
    2 posts
    Member since:
    Oct 2014

    Posted 08 Apr Link to this post

    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

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 12 Apr Link to this post

    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:
    If the above works correctly on your side too, please try to modify it, so it could replicate the issue.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Trent
    Trent avatar
    2 posts
    Member since:
    Oct 2014

    Posted 12 Apr in reply to Konstantin Dikov Link to this post

    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

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 14 Apr Link to this post

    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:

    Best Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready