1

I am struggling with the following problem, any hint would be appreciated.

In my jQuery UI layout in the center panel I put a jQuery UI tab, within this tab I put some contents. Contents is taking more space than available, I would like to have a scroll bar only on the containing div, not on the whole tab nor on the center panel. Indeed I would like to have tab headers always visible.

What I did:

  • setting center__contentSelector for the jQuery UI layout centre panel to the tab widget (so I have my header and footer displayed ok)
  • setting overflow: hidden both on the layout centre panel and the tab widget
  • setting overflow: auto on the div of the contents
  • giving heights to both the tab widget and the contents' div

The final result looks fine, however the scroll bar can't display the last items, whatever I tried. It's impossible to scroll to the limit.

Here is a fiddle that shows what it looks like: http://jsfiddle.net/mguijarr/288yaz15/

Any ideas ?

mguijarr
  • 7,641
  • 6
  • 45
  • 72

1 Answers1

1

your div's height seems to have extra 80 pixels each time, because of the tab title part. simply subtract those 80 pixels from 100%:

#tab_1 {
    height: calc(100% - 80px);
    background: #00ffff;
    overflow: auto;
}

Fixed Fiddle

Banana
  • 7,424
  • 3
  • 22
  • 43