Table body too wide, not hiding columns on resize

CraigJ

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.

CraigJ

Additional Info:

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

allan

Hi,

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

Thanks,
Allan

CraigJ

In place.

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

allan

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

CraigJ

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!

allan

Excellent.

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

Allan