Question

I am using jQuery UI to create 2 tabs. I really only need the first tab (labeled “Queue”) to be scrollable, but if all tabs created are vertically scrollable that’s fine too.

Note that I do not want or need a horizontal scroll bar.

I’ve tried placing overflow: auto; in various locations in my CSS but I can’t seem to find the results I want. My code is on jsFiddle here: http://jsfiddle.net/6Ctnt/

Can anyone help me figure out what I’m doing wrong?

Update

I need the list of items (inside of #list-container) to be scrollable. This whole thing needs to be dynamic, so I can’t use any fixed sizes for height. I need the tab content area to consume the remaining space that isn’t occupied by the #button-container and the container where the list of tabs is stored.

Answer 1

Adding this CSS may do the work:

#list-container {
    height: 200px;
    overflow-y: scroll;
}

Edit:
Without fixed heights:

#queue-tab {
    position: relative;
    height: 100%;
}
#list-container {
    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;
    overflow-y: scroll;
}

Still need to fix margins… but it seems to work