Download & Extend

Page is vertically scrolling when switching tabs

Project:Tabs (jQuery UI tabs)
Version:6.x-1.x-dev
Component:User interface
Category:bug report
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

I don't know if this happens in tabs, or in tabs panel style. When a tab is clicked instead of just switching tabs, the user is also sent back to the top of the page. I can't remember if this happens since I've created a new (partial, still under development) theme or if it happens since the beginning.

Thansk in advance!

Comments

#1

I'm also seeing this behavior, and its a bit disorientating.

#2

Title:Don't go back to top on click» Page is vertically scrolling when switching tabs
Category:support request» bug report

I think this is a bug and it's very annoying.

#3

I have found related discussion:
http://groups.google.com/group/jquery-en/browse_thread/thread/e9459e53cf...
Workaround posted there is maybe ugly, but it fixed this problem for me: set tab container height. In my theme this is like:

#tabs-tabset {
  height:30em;
}

You need to play with height to find a number that suits your case.

#4

I don't think this is a generic solution. Perhaps there are some css gurus out there to fix the issue.

#5

subscribe.

My idea would be to set the height for the panel with a inline style, which is calculated by JS at render time.

#6

Project:Panels Tabs» Tabs (jQuery UI tabs)
Version:6.x-1.x-dev» 6.x-1.x-dev

Moving this to tabs module, where I think the issue would be more easily solvable.

I noticed similar issues in the queues of both the CCK FieldGroup Tabs and Views Tabs:

#838598: Switching tabs causes page to scroll up and down.

#839756: don't momentarily reduce the height of a views tab group when a new tab is chosen.

I realise the following issue is related to vertical tabs in core which is entirely separate, however the patches on there may contain a hint on how to fix this behaviour in jquery ui tabs too.

#437546: Vertical Tabs: Reduce scrolling up and down

#7

I also have this issue, I'd really appreciate if someone could post a clean fix to this as my website needs to be finished asap! :(

#8

subscribing. Temp fix is to set absolute height (on min-height). Not really a good fix though.

#9

#10

subscribe

#11

sub

#12

sub

#13

What I did (and worked fine)... I replaced the tabs.js from the tabs module, with one from the drupal 5 version of the module.
Note: In drupal 6 the tabs.js is in te Tabs module, in drupal 5 tabs.js is in jstools/tabs/tabs.js

#14

subscribing

nobody click here