Column widths widen depending on search

tdevoe@acord.org

I have certain columns that have only an icon to allow users to click and download files. These columns are defined as %1 width as shown below.

{
                                data: 'FIG',
                                orderable: false,
                                targets: 5,
                                width: '1%',
                                "searchable": false,
                                createdCell: function (td, cellData, rowData, row, col) {
                                    $.getFIGColumnHTML(rowData, td)
                                }
                            },

Here is the function that is called to format the HTML:

            jQuery.getFIGColumnHTML = function (rowData, td) {
                var result;

                if ((rowData.FIG !== undefined) & (rowData.FIG !== null)) {
                    if (rowData.FIG !== '00000000-0000-0000-0000-000000000000') {
                        $(td).html('<img class="FIGLink" src="/content/images/FIG_pdf.gif">');
                    }
                    else {
                        $(td).html('<img src="../content/images/fig_pdf_off.gif" alt="FIG">');
                    }
                }
            }

I execute searches and the width works as defined. I then do a search returning a larger # of results and the width of that specific column widens. I'm not sure if the larger result set has anything to do with the issue. The css below shows up as inline in the debugger. The first example is the HTML with the correct width. The second example is the HTML with the incorrect width.

Thanks in advance for any ideas.

Tom

<th class="sorting_disabled" tabindex="0" aria-controls="grid" rowspan="1" colspan="1" style="width: 27px;" aria-label="FIG">FIG</th>

element {
    width: 27px;
}

<th class="sorting_disabled" tabindex="0" aria-controls="grid" rowspan="1" colspan="1" style="width: 299px;" aria-label="FIG">FIG</th>

element {
    width: 299px;
}

allan

Can you link to the page showing the issue please?

Does the data actually fit into 1% width columns? My guess is there is something in the content making the column wider.

Allan

tdevoe@acord.org

I will change the HTML formatting method to return a static string (e.g. "test") and see what happens.If there is no problem, I will check to see the HTML that is being generated. Possibly some white space characters are part the result set.

Thanks.

tdevoe@acord.org

I modified my code to return a static string for each of the columns in the columnDefs section of the table definition. If I search for all my results, I get 813 rows back. If I specify a paging result count of 1000, the formatting is correct with the form title column defined for 73% of the width. I then specify paging of 500 (results in 2 pages) and do a search for all of the results (813 rows) the formatting is more (does not seem to be exactly balanced) balanced across all of the columns (form title is no longer 73%). I've attached 2 images of how each of the results looks and the columnDefs of the table definition. The image where the form title occupies the most space is correct and is displayed when I search with 1000 specified as the page size. The other image shows more balanced column widths which is incorrect.

Thanks.