search

DataTables / Responsive

Responsive extension for DataTables, providing support for complex tables on all device screen sizes
Other
148 stars 86 forks source link

Incorrect responsive width using inline pseudo-element control #35

Closed Philzen closed 9 years ago

Philzen commented 9 years ago

When using the (default) inline control behaviour, the table width is exceeding the available width at certain screen positions.

I took the liberty illustrate this using @ComputerTinker 's Fiddle from #16 - simply take vertical split view handle in the middle and try resizing the run area.

Working snappy and exact with column type control: http://jsfiddle.net/ng9ku8y9/

Table up to 30px too wide when using inline type: http://jsfiddle.net/ng9ku8y9/1/

Philzen commented 9 years ago

Now, looking at datatables.reponsive.css, specifically the first block:

table.dataTable.dtr-inline.collapsed tbody td:first-child,
table.dataTable.dtr-inline.collapsed tbody th:first-child {
...
  padding-left: 30px;
...
}

If i disable the padding-left: 30px in my dev tools view, table width is adjusted perfectly again!

So, when inline control is activated, the part of the script that detects whether a column has exceeeded its allowed width or not needs to take into account that very padding length.

DataTables commented 9 years ago

Thanks for flagging this up. I think you are absolutely correct - what is happening is the padding-left: 30px; that is being used for the show / hide control button when the table is collapsed is not being taken into account.

Not immediately certain what the best fix is, but I'll have a think about it!

mgilberties commented 9 years ago

Experiencing this issue too. Keen to know what the best fix for this will be.

DataTables commented 9 years ago

Hopefully simply to upgrade the software once I get a chance to fix it :-).

DataTables commented 9 years ago

Got it - thanks for the test case! The issue was with the first column being hidden. It would probably be better performance wise if data that should never be shown is added to the table in a data-* attribute, but Responsive should handle this case and does now :-)