Rendering issues when using FixedColumn and Scroller extensions

stuartsjb-icr

I'm using DataTables 1.10.4 and Bootstrap 3 with TableTools, FixedColumn and Scroller extensions, and am experiencing some odd rendering bugs.

Screenshot: http://i.imgur.com/e0PjhQF.png

Firstly I'm getting a second header row within the table. It is not fixed in place, and scrolls away when scrolling the table inside the window. This can be seen in all browsers I've used so far (Chrome, Firefox, IE 11 and iOS Safari). This seems to be related to having the "sScrollX" option enabled in the initialisation code for the table, but I believe this is also necessary for the Scroller extension to work.

Secondly, within both the header rows I am seeing duplicate ascend/descend sort toggles. No idea what is causing this other than perhaps for a CSS clash somewhere, though I've not experienced it on any of my other datatables. Again this can be seen in all browsers I've tried.

Lastly (this bug shows up in all browsers I've tested so far, except Chrome), there is an additional horizontal scrollbar displaying at the bottom of the first column (which I have set to be stationary in FixedColumns) of the table. This seems to be due to the first column not rendering quite wide enough as it can only be scrolled a tiny bit left or right. Initially I thought this might be due to setting the text in the first column to have a font-weight of bold, but removing this did not fix the issue.

Unfortunately the code runs on our intranet server and as such I cannot post a link to the page.

                <div class="col-lg-12 col-md-12 col-sm-12">
                    <table class="table table-bordered" id="dataTables-studentlist">
                        <thead>
                            <tr class='tableHeaderRed'>
                                <th style="color:white">Name</th>
                                <th style="color:white">Cohort</th>                              
                                <th style="color:white">First Reg Date</th>
                                <th style="color:white">Next Reg Date</th>
                                <th style="color:white">Course Part</th>
                                <th style="color:white">Status</th>
                                <th style="color:white">Def. Reason</th>
                                <th style="color:white">Int. Date</th>
                                <th style="color:white">Surname</th>
                                <th style="color:white">Forename</th>
                                <th style="color:white">Anon. No</th>
                                <th style="color:white">HESA ID</th>
                                <th style="color:white">Course Path</th>
                                <th style="color:white">Exit Year</th>
                                <th style="color:white">NTN</th>
                                <th style="color:white">Nationality</th>
                                <th style="color:white">Int. Fee Status</th>
                                <th style="color:white">Fee Notes</th>
                                <th style="color:white">Deanery</th>
                                <th style="color:white">Hospital</th>
                                <th style="color:white">Educational Supervisor</th>
                                <th style="color:white">Educational Supervisor Email</th>
                                <th style="color:white">Address 1</th>
                                <th style="color:white">Address 2</th>
                                <th style="color:white">Address 3</th>
                                <th style="color:white">Address 4</th>
                                <th style="color:white">PostCode</th>
                                <th style="color:white">Home Phone</th>
                                <th style="color:white">Work Phone</th>
                                <th style="color:white">Mobile</th>
                                <th style="color:white">Email 1</th>
                                <th style="color:white">Email 2</th>
                                <th style="color:white">Email ICR</th>
                                <th style="color:white">StudentID</th>
                            </tr>
                        </thead>

                    </table>
                </div>   

  $(document).ready(function () {
        studentListTable = $('#dataTables-studentlist').dataTable({
            "ajax": {
                url: "includes/StudentList.php?cohortID=" + cohortFilter + "&coursePartID=" + coursePartFilter +
                        "&statusID=" + statusFilter + "&coursePathID=" + coursePathFilter + "&feeStatusID=" + feeStatusFilter + "&courseID=" + selectedCourseID,
                type: 'POST'
            },
            processing: "true",
            "dom": "firtTS",
            "sScrollX": "100%",
            "sScrollXInner": "400%",
            scrollY: tableHeight,

            "columns": [
                {className: "BoldColumn", data: "StudentView.StudentID1"},
                {data: "StudentView.Cohort"},
                {data: "StudentView.FirstRegistrationDate"},
                {data: "StudentView.NextRegistrationDate"},
                {data: "StudentView.PartName"},
                {data: "StudentView.StudentStatus"},
                {data: "StudentView.DeferralReason"},
                {data: "StudentView.InteruptionDate"},
                {data: "StudentView.Surname"},
                {data: "StudentView.Forename"},
                {data: "StudentView.AnonymousID"},
                {data: "StudentView.HESAStudentID"},
                {data: "StudentView.PathName"},
                {data: "StudentView.ExitYear"},
                {data: "StudentView.NTN"},
                {data: "StudentView.Nationality"},
                {data: "StudentView.IFS"},
                {data: "StudentView.FeeNotes"},
                {data: "StudentView.StudentDeanery"},
                {data: "StudentView.StudentHospital"},
                {data: "StudentView.EducationalSupervisor"},
                {data: "StudentView.EducationalSupervisorEmail"},
                {data: "StudentView.Address1"},
                {data: "StudentView.Address2"},
                {data: "StudentView.Address3"},
                {data: "StudentView.Address4"},
                {data: "StudentView.PostCode"},
                {data: "StudentView.HomePhone"},
                {data: "StudentView.WorkPhone"},
                {data: "StudentView.Mobile"},
                {data: "StudentView.Email1"},
                {data: "StudentView.Email2"},
                {data: "StudentView.InternalEmail"},
                {data: "StudentView.StudentID"}
            ],
            "tableTools": {
                sRowSelect: 'os',
                aButtons: [
                    "xls"
                ]
            }
        });
        new $.fn.dataTable.FixedColumns(studentListTable, {
            leftColumns: 1
        });
    });

Grateful for any help on this, the extensions work nicely otherwise!

allan

FixedColumns and Scroller doesn't currently play nicely together. That is an issue that I hope to look into later this week.

Regarding the other issues, can you link to the page so I can debug the problems please. I would suggest changing that you are using the latest versions, possibly even the nightlies, of the software and that there is no padding on the header cells.

Allan

stuartsjb-icr

Hi Allan.

Thanks for getting back to me.

Unfortunately I can't link to the page, as it's hosted on our intranet server (as I mentioned above).

I will try updating to the latest versions and let you know how it goes!

stuartsjb-icr

I've updated to DataTables 1.10.5 (with its associated extensions) and this has not rectified the issue with the extra horizontal scrollbar underneath the fixed column. I've disabled FixedColumns and Scroller for now but would like to use them again once the issues are fixed.

For some reason the second header-row issue occurs when using either (or both) scrollX or scrollY. I don't think I'm the only person who's experienced this issue, as a quick search lead me to find this : https://www.datatables.net/forums/discussion/21049/scroll-x-creates-additional-blank-table-heads-with-sort-arrows-in-them

allan

Have you tried the nightly version of FixedColumns? If you get the error with the nightly version I would very much appreciate if you could give me a link to the page so I can debug it and fix the issue before the next release (otherwise it won't be fixes, as I don't know how to recreate the issue).

Allan

stuartsjb-icr

I'm afraid I won't be able to give you a link to the page. Our development is performed on an intranet server and is for internal use only. Is there another way I could share the HTML/PHP/JS with you instead?

I've downloaded Nightly build v3.0.3 of FixedColumns and the issue remains; as you can see from the screenshot below, the extra table header row still exists for the fixed column, despite implementing this CSS fix:

div.dataTables_scrollBody thead th, div.dataTables_scrollBody thead td { line-height: 0; opacity:0.0; width: 0px; height:0px;}

The extra horizontal scrollbar still exists in browsers other than Chrome, too.

IE 11 Screenshot (data has been obscured): http://i.imgur.com/mEiHLGC.png

I will experiment further with this tomorrow to see if it is something with our internal branding CSS file or Bootstrap that may be causing the issue. Thanks again.

allan

Are you able to use JSFiddle, DataTables live, CodePen, JSBin, etc to create an example showing the issue please.

The Bootstrap example on this site doesn't appear to have that issue (it does have a problem with the sort icons being duplicated, which is resolved by using the unreleased Bootstrap integration files - I'll be releasing them soon).

Allan

stuartsjb-icr

Hi Allan,

I've copied all the relevant code to live.datatables.net here: http://live.datatables.net/xutemema/1/edit

I believe I've narrowed the issue down to some of the CSS of the dashboard template site I'm using ( http://startbootstrap.com/template-overviews/sb-admin-2/ ).

I've disabled the Scroller extension but emulated some of its functionality (albeit without server side processing) by setting up the scrollX, scrollY and iDisplayLength -1 options in the JS.

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: 0 0;
}

table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
}

Removing the SBAdmin CSS from the JSBin fixes the problem but leaves me without sorting caret icons on the header row.

stuartsjb-icr

I believe this may additionally (or alternatively) be an issue with Bootstrap. We're using version 3.2 while the current version is 3.3.4, so I will upgrade to this later and let you know how it goes.

allan

I've just committed a fix for FixedColumns to work with Scroller. The FixedColumns nightly now has this change in it.

Would be interest to hear how you get on with it if you give it a whirl.

Allan

stuartsjb-icr

Thanks for that. I have removed the offending style code from my SBAdmin CSS and added this to my custom CSS:

div.DTFC_LeftBodyLiner { 
    border-right: 1px solid black; 
    overflow-x: hidden;
}

This seems to have rectified the fixed column horizontal scrollbar issue for Firefox and IE. Additionally it now looks like Scroller and FixedColumns are working together nicely! :)

allan

Nice one :-)

Allan

stuartsjb-icr

Could the extra horizontal scrollbar I was getting on the fixed column be related to this? https://github.com/DataTables/FixedColumns/issues/7

Thanks for all your help!

allan

It is possible - frustratingly I've just tried that example again and it appears to be working for me in Chrome and IE. The worst kind of bugs...!

I'll probably need to try and find a bit of time to sit down and work through it in more detail.

Allan

jrizzi1

here is another example of this http://live.datatables.net/yuxorilo/1/edit?html,js,output

click sort on the third column and you will see the table become misaligned

seems that the column data size to be at least for me related to the issue, or at least becomes more noticeable if i have long data in the column...notice the name column peeking out in the image below

allan

Super - thanks for the link to the test case. Bit of a backlog atm so might be a little while before I can get around to fixing it, but it looks like it needs to container to be realigned in FixedColumns on every draw (which it should really be doing already...).

Allan

Pierce Krouse

I am using datatables version 1.10.9 with jquery 1.11.3, and I am seeing misalignment as well. If I remove all my css, the problem goes away, but naturally I need my styling on my table.

Actually, just removing my td {...} css gets around the problem, so it looks as if my td styling is interfering with something that datatables is doing.

Allan, I know you are busy, but do you know when you might take a look at this issue again?

allan

I can't say exactly when - I'm trying to make my way through the backlog at the moment so I can then start some new development. I'll look at this as part of that work.

Allan

Pierce Krouse

Can we use the datatables.net support options or some other system to establish a contract of some sort to schedule a fix?

allan

Yes, the support options would cover this. The "Quick Support 60" I suspect will be all that is needed for this specific issue. Unfortunately I am travelling tomorrow so it likely won't be until Monday before I can look into this in detail.

Regards,
Allan

kwein1

I'm seeing the same problem, including the short horizontal scroll bar above the "true", full-length scroll bar. I presume the short one is attached to one of the hidden div/table windows panes datatables sets up.

kwein1

I have another problem with fixedColumns. Maybe it's related.
I'm using multi-filter to provide column-specific search fields, as found at: http://datatables.net/examples/api/multi_filter.html
When fixedColumns: true is set, the first (fixed) column will not register a keyup event properly, even though all the other columns do.

If I comment out that fixedColumns line, the first column fires the keyup event properly. Commenting that line also fixes my scroll bar/column width refresh problem mentioned above. Naturally, both "fixes" come at the cost of the fixed column goodness.