How to create scrollbar in jQuery UI tab?

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.

the display: table is required to get the layout I want. I can use a real table instead, but I prefer not to. Why is this causing the problem? — void.pointer
– void.pointer, Commented Sep 20, 2011 at 2:29

Facundo Farias · Accepted Answer · 2011-09-20 03:35:15Z

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

edited Sep 20, 2011 at 3:35

answered Sep 20, 2011 at 3:08

Facundo Farias

4083 silver badges11 bronze badges

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

2 Comments

void.pointer Over a year ago

I can't use a fixed height here since the body is resizable and children need to resize correspondingly without any manual changes.

Facundo Farias Over a year ago

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

Collectives™ on Stack Overflow

How to create scrollbar in jQuery UI tab?

Update

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related