Responsive plugin problems

Kopicon

Hello, I have the following issue.
My main problem is that the responsive plugin seems not to function at all for me.

Used DataTables version:

link href="https://cdn.datatables.net/v/dt/dt-2.0.3/r-3.0.1/datatables.min.css" rel="stylesheet"
script src="https://cdn.datatables.net/v/dt/dt-2.0.3/r-3.0.1/datatables.min.js"></script

When I am initializing DataTables the following way:

table.DataTable({
data: data,
searching: false,
paging: false,
scrollCollapse: false,
responsive: true,
info: false,
destroy: true,
columnDefs: [
{ orderable: false, targets: [5] },
],
});

A width style given in pixels is set on the table, that is not dynamically changing with the width of the browser, so as soon as the size of the window is decreased, the table will be out of bound.

When I remove this width style, it becomes 100% from the table.dataTable class, and the resizing of the table becomes automatic, at some curtain point. It seems like there is a sort of minimal width, because no matter what I do in css, the width of the table won't get smaller then 590px. And the responsive plugin won't make the columns be possible to open and close. The table is simply just out of the window. The container of the table have the following styles: width:90% margin:auto.

When I am loading the table in on a small screen, the columns become openable but still nothing is responsive in the table. If I increase the size of the window, the columns are not appearing and the width of the table stays the same.

What can I do to solve this problem?
Thanks for the help in advance!

kthorngren

Apply style="width:100%" to the table tag as documented in this example.

Based on what you posted you haven't added the Responsive extension. Use the Download Builder for this.

Kevin

allan

It looks like you might have edited your post after Kevin's comment to add the Responsive code in the CDN include.

I've just tried what you have provided and it appears to work fine: https://live.datatables.net/zuzomuco/1/edit .

Please link to a test case, as requested in the forum rules and the new issue template, that has been deleted here.

Allan

Kopicon

Thank you Kevin, that solved the problem! even with the Responsive plugin.