Browser scroll position is changed when tab is changed

[Umais]

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

[Dimo]

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

[Umais]

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

[Dimo]

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

[Umais]

Hi Dimo,

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

Regards,
Umais

[Oriflame]

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

[Dimo]

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

[Jura Fajt]

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.

[Jura Fajt]

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

[Dimo]

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

[Jura Fajt]

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

[Dimo]

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

[Jura Fajt]

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

[Graham]

good read!