This is a migrated thread and some comments may be shown as answers.

Browser scroll position is changed when tab is changed

13 Answers 489 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Umais
Top achievements
Rank 1
Umais asked on 10 Oct 2012, 09:07 AM
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

13 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Oct 2012, 11:14 AM
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!
0
Umais
Top achievements
Rank 1
answered on 10 Oct 2012, 12:05 PM
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

0
Accepted
Dimo
Telerik team
answered on 10 Oct 2012, 12:56 PM
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!
0
Umais
Top achievements
Rank 1
answered on 11 Oct 2012, 05:17 AM
Hi Dimo,

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

Regards,
Umais
0
Oriflame
Top achievements
Rank 1
answered on 27 Feb 2013, 02:06 PM
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
0
Dimo
Telerik team
answered on 01 Mar 2013, 02:40 PM
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!
0
Jura Fajt
Top achievements
Rank 1
answered on 18 Mar 2013, 04:25 PM
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.
0
Jura Fajt
Top achievements
Rank 1
answered on 18 Mar 2013, 05:02 PM
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
0
Dimo
Telerik team
answered on 20 Mar 2013, 01:43 PM
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!
0
Jura Fajt
Top achievements
Rank 1
answered on 20 Mar 2013, 03:51 PM
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
0
Dimo
Telerik team
answered on 21 Mar 2013, 09:09 AM
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!
0
Jura Fajt
Top achievements
Rank 1
answered on 21 Mar 2013, 10:28 AM
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
0
Graham
Top achievements
Rank 2
answered on 17 Nov 2016, 09:56 PM
good read!
Tags
TabStrip
Asked by
Umais
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Umais
Top achievements
Rank 1
Oriflame
Top achievements
Rank 1
Jura Fajt
Top achievements
Rank 1
Graham
Top achievements
Rank 2
Share this question
or