DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

DataTable Inside jQuery UI Tab

DataTable Inside jQuery UI Tab

thecountofzerothecountofzero Posts: 21Questions: 0Answers: 0
edited February 2010 in General
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

Replies

  • allanallan Posts: 63,277Questions: 1Answers: 10,424 Site admin
    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
  • thecountofzerothecountofzero Posts: 21Questions: 0Answers: 0
    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
  • allanallan Posts: 63,277Questions: 1Answers: 10,424 Site admin
    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
  • thecountofzerothecountofzero Posts: 21Questions: 0Answers: 0
    That does not fix it.

    Any other thoughts?


    Thanks,
    Mike
  • allanallan Posts: 63,277Questions: 1Answers: 10,424 Site admin
    How about adding zoom:1 to div.tab as well as the overflow? Although it shouldn't actually make any difference...

    Allan
  • thecountofzerothecountofzero Posts: 21Questions: 0Answers: 0
    Nope...


    Thanks,
    Mike
  • allanallan Posts: 63,277Questions: 1Answers: 10,424 Site admin
    hehe - starting to run out of ideas now... How about removing position: relative; from dataTables_wrapper class?

    Allan
  • thecountofzerothecountofzero Posts: 21Questions: 0Answers: 0
    Well done Allan. That worked indeed.

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

    Thoughts?


    Thanks,
    Mike
  • allanallan Posts: 63,277Questions: 1Answers: 10,424 Site admin
    edited February 2010
    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
  • RipRynessRipRyness Posts: 1Questions: 0Answers: 0
    Had the same problem and this solution fixed it. "Processing" display now appears at the top of the page which is fine for me.
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.