Browser scroll position is changed when tab is changed

14 posts, 1 answers
  1. Umais
    Umais avatar
    5 posts
    Member since:
    Feb 2012

    Posted 10 Oct 2012 Link to this post

    Hi, I'm having an issue here; I have a TabStrip in my page, almost in the middle of the page so, to reach that, I need to scroll down a little. When I do, and select a tab to open, the scroll position is changed, it scrolls up as soon as the tab is opened. It happens in Chrome and Safari; though, sometimes Safari works fine, without this issue. Can anyone tell me why it happens or/and how can I solve this issue?

    Thanks,

    Umais
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Oct 2012 Link to this post

    Hello Umais,

    I can reproduce this problem if I add <a href="#">tab text</a> to the tabs and quickly click on a new tab during a tab transition animation. If you have hyperlinks around the tab labels, please remove them.

    Regards,
    Dimo
    the Telerik team
    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. Umais
    Umais avatar
    5 posts
    Member since:
    Feb 2012

    Posted 10 Oct 2012 Link to this post

    Hi Dimo,

    I don't have any hyperlinks around the label of tabstrips; to further clarify my issue, I made a test page so that the main issue can be seen properly. I added "<br/>" to make sure that the page has a scroll bar visible and the tab strip is somewhere at the end of the page. Scroll down to the end of the page, open some other tab and see if the page scrolls up a little or not. I don't suppose it's the case with the Chrome I'm using, which is Version 22.0.1229.92 m (latest, according to Chrome update check).

    here is the link.
    http://85.197.112.8/listing_1.html

    Regards,

    Umais

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Oct 2012 Link to this post

    Hello Umais,

    The problem is caused by the fact that during the time that the tabs are changed, the page get smaller, so the scroll position goes up. The solution is to set height or min-height style to the TabStrip content <div>s, so that the overall TabStrip height remains constant.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Umais
    Umais avatar
    5 posts
    Member since:
    Feb 2012

    Posted 11 Oct 2012 Link to this post

    Hi Dimo,

    Thank you so much for the solution, it works just fine now.

    Regards,
    Umais
  7. Rene
    Rene avatar
    1 posts
    Member since:
    Nov 2012

    Posted 27 Feb 2013 Link to this post

    Hi, I have the same problem as OP mentioned. The page "jumping" after selecting a tab is caused by href attributes in the tab links. These seem to be generated by the MVC wrapper automatically. Of course I could remove them via JS, but it would be nicer to have such option in the MVC wrapper itself. Is there some solution for this ?

    Thanks in advance !
    KR, Jura
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Mar 2013 Link to this post

    Hi Jura,

    I am not able to reproduce the described problem with the latest Kendo UI version. Normally the browser navigation action should be cancelled by the TabStrip scripts, so that there is no jumping. Please try testing with it and let me know if the issue persists.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Jura Fajt
    Jura Fajt avatar
    4 posts
    Member since:
    Aug 2012

    Posted 18 Mar 2013 Link to this post

    Hi Dimo,

    sorry for late answer, took me some time to get to this again. I think my issue is the same you mentioned in your first answer in this thread - when I generate the markup with Kendo MVC helper TabStrip(), it also creates the anchors around tab labels. Then it "jumps" in the browser. Seems to me there is no way to involve the default browser behavior regarding this except of removing the anchor wrappers. I can strip them out in JS, but it would be nicer to have it directly in the MVC helper. Actually, the "jumping" behavior could be intentional in some cases, so some parametrization of generating anchors around labels would be nice. Default setting for this should be False, as the "jumping" would rarely be used, I guess.

    Thanks, Jura.
  10. Jura Fajt
    Jura Fajt avatar
    4 posts
    Member since:
    Aug 2012

    Posted 18 Mar 2013 Link to this post

    Hi again,

    just some more observation - it is enough to remove the href attribute from tab label anchors to stop the "jumping" behavior. Still had to do it via JS or manually via Firebug or so ...

    Thanks, Jura
  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Mar 2013 Link to this post

    Hello Jura,

    It is still unclear to me how you manage to reproduce the discussed problem. I am sending a project, which works correctly on my side. Please compare with your implementaiton.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Jura Fajt
    Jura Fajt avatar
    4 posts
    Member since:
    Aug 2012

    Posted 20 Mar 2013 Link to this post

    Hi Dimo,

    thanks for your time. I have compared your solution with mine, and the difference was that I had .Animation( false ) on the TabStrip. When I set it to true, the TabStrip will not "jump" the page. Seems that the animation JS replaces the default event handlers. Without it the default browser behavior is applied, which tries to move the anchor to the top. Attached slightly changed view so that you could see it.

    Regards, Jura
  13. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Mar 2013 Link to this post

    Hi Jura,

    Indeed, the problem is exhibited when animation is disabled, however, this is fixed in the Q1 2013 Beta and the official Q1 2013 release, which is now available. Please consider upgrading. Alternatively, you can use the following workaround:

    $(document).ready(function () {
        $("#TabStrip1").children(".k-tabstrip-items").find(".k-link").click(function (e) {
            e.preventDefault();
        });
    });


    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Jura Fajt
    Jura Fajt avatar
    4 posts
    Member since:
    Aug 2012

    Posted 21 Mar 2013 Link to this post

    Hi Dimo,

    ok, that was the problem - I was testing it on latest official release, not on the Beta. So I have to update to the yesterdays' release, anyway. Thanks a lot for spending your time !

    Kind regards, Jura
  15. Graham
    Graham avatar
    1 posts
    Member since:
    Aug 2014

    Posted 17 Nov Link to this post

    good read!
Back to Top
Kendo UI is VS 2017 Ready