Alan Alcock Alan Alcock - 2 months ago 7
Javascript Question

jquery UI Tab not scrolling with container

Setup :

I have a containing div which is meant to be scrollable. This is a container for my jquery ui tab div.

Problem:

When I scroll the container in IE8 it scrolls other content in it but the jquery UI tab is fixed as though position=fixed. Works fine in FF. Any help welcome. Many thanks

CSS:

#content {
overflow:auto;
margin: 1px;
height: 700px;
}

div.content-container {
border: solid 1px #C8C8C8;
padding:10px;
background-color: #F5F3E5;
margin: 1px 2px 10px 1px;
}


js:

$('#tabs').tabs();


html:

<div id="content">
<div class="content-container">
<div id="tabs">
</div>
</div>
</div>

Answer

Add position:relative to the scrolling container. This is a common issue in IE.

Comments