Table body too wide, not hiding columns on resize

Table body too wide, not hiding columns on resize

CraigJCraigJ Posts: 29Questions: 12Answers: 2

Debug: https://debug.datatables.net/iqeken
Link: https://c9pets.erpecommerce.com/express/

I have a responsive table that when I resize the browser it's not hiding columns, and the width of the table body is too wide. The table width is 100%, and I think I've set all the options correctly. I have 3 columns set to class="all" - I think that part is working, it's just that the calculations for the table body are wrong, and I just can't seem to figure out what the issue(s) is/are.

To add a row to the table, add CRATESOFTLG in the Item field, add a quantity of 1 then click "Add". This is a testing / development server, so excuse the mess.

Thanks.

This question has an accepted answers - jump to answer

Answers

  • CraigJCraigJ Posts: 29Questions: 12Answers: 2

    Additional Info:

    The datatables.js init is in the scripts/c9.express.js file.

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    Hi,

    Could you possibly try the nightly version of Responsive which has a number of improvements in it.

    Thanks,
    Allan

  • CraigJCraigJ Posts: 29Questions: 12Answers: 2
    edited November 2015

    In place.

    I see the same behavior as before. https://c9pets.erpecommerce.com/express/

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin
    Answer ✓

    Thanks for trying that! I downloaded a local copy and have been experimenting a bit and realised what the issue is.

    When Responsive initialises it calculates what the smallest width a column can be before it needs to be hidden. When the table has no content (which is doesn't at the start) that is defined by the width of the column title text only.

    When you then add data to the table that state is now invalid and needs to be refreshed.

    Unfortunately this doesn't happen automatically as Responsive doesn't currently listen for new rows being added to a DataTable (it can't - DataTables doesn't fire an event for that - something that I'll address in the next major update!).

    However, the "fix" is fairly simply. As soon as you add the row to the table call the responsive.recalc() method - for example:

    c9.express.dataTable.responsive.recalc();
    

    Inserting that immediately after your draw should resolve the issue.

    Allan

  • CraigJCraigJ Posts: 29Questions: 12Answers: 2

    Had to put the recalc after the draw, and it worked.

    var node=c9.express.dataTable.row.add([
        hiddenItemNumber,
        hiddenUnit,
        inputItemNumber,
        inputDescription,
        inputQuantity,
        inputUom,
        inputPrice,
        inputExtension,
        buttonDelete
        ]).node();
    c9.express.dataTable.columns.adjust().draw();
    c9.express.addEventsToNewRow(tableRow);
    c9.express.dataTable.responsive.recalc();
    

    Thanks!

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    Excellent.

    The next major update for DataTables should handle that kind of stuff automatically...

    Allan

This discussion has been closed.