div having scrollbar in a cell flick when re-rendering the grid in IE 11

tnthieu

Hello.

I have a datatable as in image. I have a cell contain

               {
                    data: 'LastRemarkDisplay',
                    render: function (data, type, full) {
                        return '<div class="max-height-div"><span class="last-remark-font">' + data + '</span></div>';
                    }
                },

.max-height-div {
    height: 65px; 
    overflow-y: auto;
    vertical-align: middle !important;
}

There is no problem when there is no scroll in the div. But when the contain of LastRemarkDisplay overflow, a vertical scrollbar will be shown.
At this time, if I display the panel on the right side, it seems it cause the datatable re-render, and then it make the div flickering (hide and reshow).
The same problem happens when I redraw the grid
$('#jobs-table').DataTable().order([[2, 'desc'], [3, 'asc']]).draw(false);

Do you have a solution to make the div in the cell not flickering?

This problem not happen in Chrome

Please help. Thank you very much

allan

Are you changing the width of the DataTable when you show the side panel? If so, that will be causing DataTables to adjust its column widths which I guess might cause what you are seeing in IE.

Allan

tnthieu

Hi Allan,

I don't change the the columns width. I use a fixed height for row, and for that column I use fix width.

I tried to make a button called Redraw Grid. When I click on that button, I will redraw the grid:

$('#btnRefresh').click(function () {
        dataTable = $("#jobs-table").DataTable().rows().invalidate('data').draw('page');
    });

and really this make the cell containing div with scroll flickering.

tnthieu

hi @allan

I have another question that may help me to solve my problem

when I call

row.data(data).draw('page');
This code will redraw only the row or it redraw the whole page in the datatable?
If if redraw whole page, do you know how can I redraw only one row?

Thanks

allan

I think I'll need a link to a test case (and dig out my IE VM!) for this one please.

Thanks,
Allan

tnthieu

Hi @Allan,

Please find the code here
https://liveweave.com/AEhOO5

I cannot refer to datatatable in this IDE (that is support IE) and haven't generated data for datatable. Could you add them?

that's is the code you can try on your IE.

Thank you

allan

That link just shows Hello Weaver! in a p tag. I don't see any use of DataTables there I'm afraid.

I cannot refer to datatatable in this IDE (that is support IE) and haven't generated data for datatable. Could you add them?

You can use this as a template.

Allan