Width for all columns is set to 0

Martin@heco

I'm doing an overhaul for the data tables on my website. The new ones should be rendered in an overlay of the existing page. As a spike solution I wrote the overlay using a simple image of the homepage as the background. Both backend and data rendering in the tables worked fine, so I implemented the solution to show in the complete website.
But if I open the layer now, the columns are off. After debugging for a while I found, that the width attributes in the table head are set to 0.
I'm still using the same DataTable Config, the same backend and hence the same data for the tables. Even the JS Code and the stylesheets are the same (except for the positioning of the layer), but I get a different result. I'm really at a loss right now.

I use the following HTML snippet to render the tables into:

                    <div id="techData" class="portBox">
                        <h2>Technical data</h2>
                        <img src="" class="tech-thumbnail">

                        <div id="filterArea">
                            <div id="rangeFilter" style="width: 1px;">Nennweite:
                                <select id="min" name="min" style="width:auto;"></select>
                                <select id="max" name="min" style="width:auto;"></select>
                            </div>

                            <table border="0" cellspacing="0" cellpadding="0" style="overflow-y: auto; overflow-x: hidden; max-height: 300px;"></table>

                            <ul class="footer">
                                <li><a href="#" >technical data</a></li>
                                <li><a href="#" >stocks and prices</a></li>
                                <li><a href="#" style="color:#bbb;">request list</a></li>
                            </ul>
                        </div>
                    </div>';

This is init config used to render the dataTables:

techDataTable = target.DataTable( {
    // Webservice data start
    "columns": xhrdata.columns,
    "data":    xhrdata.data,
    "order":   xhrdata.order,
    // Webservice data end

    "paging": false,
    "info": false,
    "bFilter": true,
    "dom": "t",
    "ordering": true,
    "scrollY": "350px",
    "scrollCollapse": true,

})

The working result with the image in the background but the correct cell rendering can be found here:
http://preview.heco.de/datatables/?id=415&source=techData
The same table integrated in the existing homepage can be found here after a click on "technical data":
http://dev.heco.de/en/edelstahl/industrial-valves/ball-valves/screwed-ends/1-pc-reducer-port/economic.html

The question is: How the heck do I get the latter solution to render the cells correctly...?

allan

The table is initialised hidden, so there is no height or width that can be assigned. What you need to do is make use of the columns.adjust() method when the table is made visible.

Allan

Martin@heco

Hey Allan,
thanks for your reply. Your answer did the trick...!
Just out of curiosity (and probably for better event handling): Is there some kind of "after-render" callback I can use for this scenario...?

AlexandreDelachapelle

I also use the columns.adjust() and it works perfectly !
Thanks Allan !