Scollable column widths - Chrome ok, Firefox and IE-WTF?

larsonator

Ok, obviously im using Datatables.
and i am also using the scroll able plug in.

While everything seems to work fine in Chrome, in Internet explorer, and Firefox, stuff is full of WTF.
here is my code:

$(document).ready(function(){
 var CaseNotes = $("#casenotes").DataTable({
        ajax: function (d, c, s) {
            var options = {
                data: d,
                callback: c,
                url: base_url + '/CaseManagement/list_case_notes'
            };
            var url = window.location.href;
            var index = url.lastIndexOf("/");
            options.data.caseid = url.substring(index + 1);
            $.DataTablesRequest(options);
        },
        serverSide: true,
        responsive: true,
        searching: false,
        columns: [
            {data: "noteid", class: "nodisplay"},
            {data: "notedate", width: "10%"},
            {data: "issues", width: "10%", createdCell: function (td, cellData, rowData, row, col) {
                    $(td).addClass('cnissues').addClass('vtop');
                }, class: "cnissues"
            },
            {data: "timespent", width: "15%"},
            {data: "note", createdCell: function (td, cellData, rowData, row, col) {
                }, class: "cnissues", width: "55%", render: function (data, type, row, meta) {
                    return "<div class='cnnotes'>" + data + "</div>";
                }
            },
            {data: "lastedit", width: "10%"}
        ],
        columnDefs: [
            {
                className: 'noselect vtop',
                targets: "_all"
            }
        ],
        "order": [[1, "asc"]],
        dom: "rtiS<\"clearfix\">",
        deferRender: true,
        scrollY: 500,
        scrollX: false,
        scrollCollapse: true,
        scroller: {
            loadingIndicator: true,
            displayBuffer: 10
        }
    });
});

the column width on chrome are acceptable
id (hidden): 44px, 77px, 77px, 132px, 581px, 76px.

Fire Fox and Internet explorer don't seem to pay any attentions at all.
FireFox:
id (hidden):44px, 146px, 146px, 237px, 266px, 146px
IE:
id (hidden):44px, 133px, 198px, 198px, 267px, 146px

Has anyone else had this? anyone know any solution to this?

allan

Can you link to the page showing the issue please?

Although I would suggest using the columns.visible option to remove columns form the display. Using CSS with display:none is just a nightmare across browsers in tables.

Thanks,
Allan

larsonator

Unfortunately i'm not able to disclose a link as the the project is a closed internal system, which handles private information.

I attempted to use columns.visible, which doesnt seem to work.
when i add

columnDefs: [
            {
                visible:false, 
                targets:0
            },

or

        columns: [
            {data: "noteid", visible:false},

the note id continues to be displayed.

here is a js fiddle for that problem https://jsfiddle.net/xumd3r50/1/

for some reason though it seems to apply the correct widths in the js fiddle, so im un sure what i should be looking for on my page which could be upsetting the width calculations for the cell widths.

I dont know if this helps but i created a test record with some dummy data and used the debug tool
https://debug.datatables.net/ocawoy

allan

responsive: true,

I wasn't aware that you were using Responsive before, I missed that point, sorry. It calculated column visibility itself, and then applies that as it sees best fit. You can use special classes to tell Responsive that certain columns should never be shown. Simply add the class never to the column.

Allan

larsonator

ok, so i finally managed to get that to work using the never class name. (had to update datatables and responsive),

This still leaves the initial problem with FireFox and IE.

i tried stepped through the code where the widths are calculated (_fnCalculateColumnWiths), and the column widths come out with what seems to be approximately the correct calculations.

how ever it seems to be when the widths are applied to the headers in the loop at line: 3294 that the table headers, in IE and Firefox the offsetwidth reset. and stay this way.

I am unable to reproduce this outside of the project..

i put a return right after the the loop at line 3294, in IE and FireFox, for the largest column (55%) the width was calculated to 525px, but the offsetwidth was locked at 283px.

When i let it run its course, the widths are completely different, being set at 146px, 146px, 237px, 267px, 146px.

I dont know what to make of it, it only occurs in FireFox and IE.

here is a complete HTML output of the page: http://pastebin.com/khtwcAXK

allan

Thanks for the pastebin drop. I don't immediately see anything obvious there, but there are a lot of localhost references to scripts and stylesheets that could be impacting it. Are you able to post the page up on the web somewhere, or to reproduce the issue using one of my demos, or in JSFiddle / http://live.datatables.net so I can debug it please?

Allan

larsonator

Hi Alan,
i have managed to port it over to your live.datatables.net. couple of notifications pop up about other tables that are unhappy, but they are hidden in modals.

http://live.datatables.net/yekagana/5

I hope this helps. while for some reason the note id still displays here, the issue of case notes not being about 55% of the width in IE and firefox is still there.

I appreciate your efforts.

larsonator

bumb

allan

Thanks for the link - it will probably require a fair bit of time to debug looking at it (free time isn't something in abundance for me atm unfortunately). I'll hopefully be able look at it later today and post back then.

Allan

allan

That took a little while. The Note column is given a class of cnissues. In your CSS you have:

.cnissues {
    max-width: 150px;

Firefox appears to enforce this. Chrome does not.

Remove it and the column widths will work as expected.

Allan

larsonator

omg.. I cant believe i missed that :/

Allan you sir are a genius!