scrollx width with scrolly

jfr

Hi

I am having a problem to fit data horizontally in a DataTable
It seem that columns.adjust is not taking the vertical scroll bar in consideration

I am using

oTable = jQuery("#mytable").DataTable( {
    "infoCallback": function( settings, start, end, max, total, pre ) {
        jQuery("#mytable").css("visibility","visible");
        jQuery(".dataTable").css("visibility","visible");
        jQuery("#mytable").tabs({
            "activate": function(event, ui) {
                jQuery( jQuery.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
            }
        });
    },
    "autoWidth": true,
    "jQueryUI": true,
    "scrollY": "65%",
    "scrollCollapse": true,
    "scrollX": true,
    "paging": false,

If you need more please ask
Thanks

allan

If you need more please ask Thanks

Yes, please link to a test case showing the issue.

Also you have "scrollY": "65%" - percentages for heights are very very tricky in CSS. If you change that to a pixel value such as '300', does it then work?

Thanks,
Allan

jfr

Hi Allan
I have sent you the link and password through your email
Thanks

allan

Thanks - I have replied.

Allan

jfr

Hi Allan

I have deleted the tooltip and still having the same horizontal problem

Thanks

jfr

Hi Allan

I do not think that you had time to look in to it with the holidays

I you have time I have remove the tooltip and still have the same problem

Thanks

allan

Hi,

Thanks for the reply. Sorry no - I didn't have a chance to look at it before.

The table appears to have the class ui-tabs on it for some reason. Could you remove that please. Also try removing the class ui-corner-all from the table.

Allan

jfr

Hi Allan,

I see a small difference but not by mutch
Those ui- are in jquery-ui.css

Thanks for your time
JF

allan

In your code you have:

jQuery("#mytable").tabs({
"activate": function(event, ui) {
jQuery( jQuery.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
}
});

that is making the table a "tab". Is there a reason for that? That appears to be the issue. Remove that and it should work.

Allan

jfr

YES YES it did the trick

Something I picked up in the search for misaligned header and footer

Thanks a lot

DeTrop

Hi Allan,
I am facing a similar issue with IE8 (emulated in developer toolbar only for sake at the moment). But I need to call
$($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
on tab number 2 activation to get responsive to get its job done, since I need to initialize the datatable before tab 2 is active. This leads into misbehaviour as well because of the datatable stays within in a tab. The details style icons will be shown, but aren´t clickable, thus the details row won´t be shown.

As soon as I put the datatable outside the tabs. Everythings works great. Except for the sorting icons. This is also true for the examples found here in IE8 emulation mode: https://datatables.net/extensions/responsive/examples/child-rows/column-control.html

Maybe it is due to the emulation mode. I don´t know whether I can trust this mode. It is going to last some days to get access to an IE8 in company intranet.

Is there any chance to circumvent this issues? Thx in advance.
Btw: initializing the datatable on tab activation works (except sorting icons). But as I am in the early stage of the development process, I don´t know yet when and where to init the datatable best.

DeTrop

jquery v1.11.1
datatables v1.10.2
responsive v1.0.3

PS: Win7 - IE8 not working. Same behaviour as seen in emulation mode.