DataTable Inside jQuery UI Tab

thecountofzero

I am trying to put a DataTable inside of a jQuery UI tab. It works fine in Firefox, but not in IE7. I have
not tried IE8.

The DataTable does not render correctly and stay within the tab content area.

Please take a look at the following link:

http://www.malamoney.com/jquery/tabs/tabs-table.html

Any idea how to fix this?


Thanks,
Mike

allan

I don't have IE available at the moment - are you able to post a screenshot showing the problem please? It looks good in Safari 4 :-)

Allan

thecountofzero

Here is a link to a screen shot:

http://www.malamoney.com/jquery/tabs/screenshot.jpg

I am going to upgrade to IE on one of my development machines so I can see how it renders on IE8
and so that I can do more IE8 testing in general.

Thanks,
Mike

allan

If I disabled the overflow:auto property on div.tab, then I get the same effect as in your screenshot. Perhaps IE6 doesn't understand that, or uses the wrong default. If you change it to overflow:hidden - does that fix it?

Allan

thecountofzero

That does not fix it.

Any other thoughts?


Thanks,
Mike

allan

How about adding zoom:1 to div.tab as well as the overflow? Although it shouldn't actually make any difference...

Allan

thecountofzero

Nope...


Thanks,
Mike

allan

hehe - starting to run out of ideas now... How about removing position: relative; from dataTables_wrapper class?

Allan

thecountofzero

Well done Allan. That worked indeed.

However, I am wondering if removing that will have any undesired side effects elsewhere.

Thoughts?


Thanks,
Mike

allan

Good stuff :-). Third time lucky as they say!

The only thing the position:relative is needed for is positioning the 'processing' display element. It doesn't look like you are using that, so it shouldn't present any problem!

Regards,
Allan

RipRyness

Had the same problem and this solution fixed it. "Processing" display now appears at the top of the page which is fine for me.