scroll bar not visible in jquery tabs

Question

First up, I know this question is probably asked several times, but everyone's layout is different!

I have a mapping application and with a left side tool bar. This tool bar has jquery tabs. I cant get a scroll bar on these tabs. even after overloading .ui-tabs-panel. I know just by adding a height:somepx here gives me scroll bars, but thats not what i want. I want the height to be always till all the way down. I have tried several things but nothing works :(

I suspect its because of my other layout properties which are there to keep the layout liquid (make map adjust to screen sizes and keep left side bar constant).

Here is the stripped down version in Jsbin:

http://jsbin.com/exeguw/edit#source

Can some one please help me get the vertical scroll bar?

Thanks!

Sam Tyson · Accepted Answer · 2012-07-03 19:59:54Z

1

If you set the tab div to the height of the #map div (adjusted for tab headers) after the tabs are created, then overflow will kick in and make the contents scrollable:

javascript:

function ResizeTabs() { 
   $("div.scroll-tab").height($("#map").height() - 80);
}

$(function() {
   $(window).resize(ResizeTabs);
   $('#tabs').tabs({
     create: ResizeTabs
   });
});

Updated jsBin.

EDIT: now handles window resizing as well!

edited Jul 3, 2012 at 19:59

answered Jul 3, 2012 at 16:57

Sam Tyson

4,6344 gold badges29 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shaunak Over a year ago

+1 for a great solution! but this only works one time! If the browser is resized the scroll bar goes under the footer and disappears.

Sam Tyson Over a year ago

Updated the code to handle window resizing - I have had to do this recently, so I already had a resizing solution.

Kedar Joshi · Accepted Answer · 2012-07-04 07:15:27Z

1

Try this http://jsbin.com/exeguw/9/edit#javascript,html,live

edited Jul 4, 2012 at 7:15

answered Jul 3, 2012 at 7:23

Kedar Joshi

1,52111 silver badges18 bronze badges

1 Comment

Shaunak Over a year ago

that shows me scroll bars, but It will scroll the tabs out of view too. I want the tabs to be seen always and just the contents scrolled.

Collectives™ on Stack Overflow

scroll bar not visible in jquery tabs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related