Problem: the responsive defines the size too large to normal.

Problem: the responsive defines the size too large to normal.

SebCollardSebCollard Posts: 8Questions: 4Answers: 0
edited September 2019 in Free community support

I have a problem with the reponsiveness of the datatables with the size of columns.
When datatables are defined the size of column, that is bigger and the last column of the table is no displayed.
So I have tried to add a CSS class with a max-width, but it is not working.

HTML :

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

<table class = "display" id = "datatable"></table>

CSS :

.cell_table {
  max-width: 250px;
}

JS :

$('#datatable').DataTable({
    "sPaginationType" : "full_numbers",
    "columnDefs" : [{
        "targets": "_all",
        "createdCell" : function (td, cellData, rowData, row, col) {
            $(td).attr('id', 'cell-' + col);
        },
    }, {
        "targets" : [0, 1, 2, 3],
        "className" : "text_center cell_table",
    }],
    "lengthMenu" : [[5, 10, 20, 30, -1], [5, 10, 20, 30, "All"]],
    "iDisplayLength" : -1,
    data : data_use,
    columns : column_name,
    dom : 'lfrtip',
    responsive : true,
    destroy : true,
    searching: true,
});

Here you can find the code on JSfiddle.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @SebCollard ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • SebCollardSebCollard Posts: 8Questions: 4Answers: 0
    edited September 2019

    @colin It's easier to replicate the issue with FF or Safari and the JSfibble I pass in the post.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @SebCollard ,

    Ah sorry, I missed that. I'm trying it with that CSS removed, and I'm not seeing the problem. Please can you give step-by-step instructions on how to reproduce.

    Cheers,

    Colin

  • SebCollardSebCollard Posts: 8Questions: 4Answers: 0

    @colin To resolve my problem I delete the responsive and I add a scroll bar for table when the size of the window is too small.

This discussion has been closed.