DataTables logo DataTables

ColVis Table Width
  • In some circumstances with ColVis when you hide columns the remaining columns do not automatically size to fill the full table with. This can be seen in your live demos here:


  • Seems to work okay for me. What browser and platform are you using?

  • Hi Allan,

    I am using Internet Explorer 8 on Windows XP SP3, all I have to do is remove 'Platform' from the first link listed above and the column widths break.

    Hope that helps!
  • Hi Allan,

    Do you need me to provide any demonstrations for this?

  • I don't have a computer with IE immediately available at the moment - but I'll be sure to try this later on. Is IE throwing a Javascript error at all?

  • Hi Allan,

    IE build 8.0.6001.18702 isn't displaying any JavaScript errors on the page sorry! I am using jQuery 1.5.2 (as I still cannot get 1.6.1 to work with ColVis) the following JavaScript setup:

    "bJQueryUI": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bProcessing": true,
    "bSort": true,
    "bSortClasses": false,
    "bInfo": true,
    "bAutoWidth": true,
    "sDom": '<"H"C<"clear">>Rrtl<"F"i>',
    "oColVis": {
    "buttonText": "Show/Hide Columns"

    And the following HTML DOM:

    <table id='ReportTable' class='reportTable' style='width: 100%;'><thead><tr><th>Rendering engine</th><th class='reportSort'>Browser</th><th class='reportSort'>Platform(s)</th><th class='reportSort reportSortAsc reportAverage'>Engine version</th><th class='reportSum'>CSS grade</th></tr></thead><tbody><tr class='reportData'><td>Trident</td><td>Internet Explorer 7</td><td>Win XP SP2+</td><td class='center'>7</td><td class='center'>5.6</td></tr><tr class='reportSubTotal'><td class='center'></td><td class='center'></td><td class='center'></td><td class='center'></td><td class='center'></td></tr><tr class='reportData'><td>Trident</td><td>AOL browser (AOL desktop)</td><td>Win XP</td><td class='center'>6</td><td class='center'>1.9</td></tr><tr class='reportData'><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class='center'>1.7</td><td class='center'>4.1</td></tr><tr class='reportData'><td>Gecko</td><td>Firefox 1.5</td><td>Win 98+ / OSX.2+</td><td class='center'>1.8</td><td class='center'>3.7</td></tr></tbody><tfoot><tr class='reportTotal'><td class='center'></td><td class='center'></td><td class='center'></td><td class='center'></td><td class='center'></td></tr></tfoot></table>

    I have tried playing with the DataTables options, DOM configuration properties but to no avail. Hope that helps!
  • Hi Allan,

    Sorry to be a pain, but have you had a chance to investigate the cause for this?

    EDIT: I have checked the latest builds and this bug still exists on my build and on your 2 demo pages I listed in my first post:

    - DataTables: 1.8.1
    - ColVis: 1.0.5
    - ColReorder: 1.0.2

  • Sorry Allan,

    I've tried again with jQuery 1.6.1 and the ColVis plugin (1.0.5) doesn't work still in IE8. If you click the "Show/Hide Columns" button it will show the popup but when you click on a column the checkbox doesn't untick/retick and so nothing happens.

  • Hi Allan,

    Sorry to bump, but have you had a chance to install IE8 and investigate the CSS issue with ColVis? I've got the latest DataTables, ColVis and ColReorder nightly builds installed and this bug is still present.

  • Sorry i haven't yet - I've bookmarked this discussion to remind me to do so though. Are you getting a Javascript error? Can you link to your example just in case I can't reproduce it (I had thought this was working now).

  • Thanks Allan!

    There are no JavaScript errors on the page or in the console, it's just the table width CSS which works in some of your demo examples but not all in IE8. I'm afraid my reproducing solution is on my work network and so cannot be pushed to the web.

  • Any progress on this?

    Also note, it seems to only happen when you switch on a new column, then hit Restore Original. If you remove a column, then hit Restore Original it works fine.
  • I just started having this error in IE7 and 8 using ColVis 1.0.7 with datatables 1.8.2 and jquery 1.6.4.. when you click on the show all button it throws this error::
    Object doesn't support property or method 'indexOf' jquery.ColVis.js line 546 char 5
    which is this
    if (that.s.aiExclude.indexOf(i) === -1)
    that.s.dt.oInstance.fnSetColumnVis( i, true, false );
    in the $(mButton).click( function (e)}

    Do you need the table initialization parameters? I can paste that if you need..
    This is wierd because I am pretty sure this was just working... wondering if anyone else has run into this...
This discussion has been closed.
All Discussions