Responsive Collapse mode to only show on mobile

Hi,

thanks for your post, and sorry for the trouble.

Thanks for sharing this! This sounds reasonable and I’ll definitely recommend it to users who are also facing this issue!

Best wishes,
Tobias

Well, so much for a good thing.
My Chrome upgraded this morning and the collapse buttons are now showing on my desktop. But the fix still works on Edge and Firefox.
I will play around with it some more on Chrome.

Hi,

that’s indeed strange, yes. If you can find a cause, please let me know!

Best wishes,
Tobias

I don’t know if this is the issue, but I just noticed some discrepancies between Firefox and Chrome.

Here is the relevant HTML for my table:

<div id="tablepress-1_wrapper" class="dataTables_wrapper no-footer">
<div class="dataTables_length" id="tablepress-1_length"><label>Show <select name="tablepress-1_length" aria-controls="tablepress-1" class=""><option value="10">10</option><option value="20">20</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div>
<div id="tablepress-1_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="tablepress-1"></label></div>
<table id="tablepress-1" class="tablepress tablepress-id-1 dataTable no-footer dtr-inline collapsed" role="grid" aria-describedby="tablepress-1_info" style="width: 1141px;">
<thead>...</thead>
<tbody class="row-hover">...</tbody>
</table>

In Firebug:
If you highlight this code:
<div="tablepress-1_wrapper" class="dataTables_wrapper no-footer">
the css popup shows:
#tablepress-1_wrapper.dataTables_wrapper.no-footer | 1140 x 726.6

If you highlight this code:
<table id="tablepress-1" class="tablepress tablepress-id-1 dataTable no-footer dtr-inline" role="grid" aria-describedby="tablepress-1_info" style="width: 1142px;">
the css popup shows:
table#tablepress-1.tablepress.table press-id-1.dataTable.no-footer.dtr-inline |1140 x 661.6
(note: the length numbers are supposed to be different)

In Chrome Inspector:
If you highlight this code:
<div="tablepress-1_wrapper" class="dataTables_wrapper no-footer">
the css popup shows:
#tablepress-1_wrapper.dataTables_wrapper.no-footer | 1140 x 726.6

If you highlight this code:
<table id="tablepress-1" class="tablepress tablepress-id-1 dataTable no-footer dtr-inline" role="grid" aria-describedby="tablepress-1_info" style="width: 1141px;">
the css popup shows:
table#tablepress-1.tablepress.table press-id-1.dataTable.no-footer.dtr-inline |1140.8 x 661.6

There is a
In Firefox: style=”width”: 1142px yet css is displaying 1140px
In Chrome: style=”width”: 1141px yet css is displaying 1140.8px

(As an aside, Edge also shows width = 1142px.)

Don’t know this all means but there it is.

Hi,

so the differences are in the calculated CSS widths? I can only assume that these are rounding errors, maybe caused by different methods for determining the width :-/

Regards,
Tobias

Tobias,

I was thinking the same thing. What is interesting is the difference in the Style= width and css.
In Firefox, it is a difference of 2 px. So it is fitting 1140px within 1142px.
In Chrome, it is a difference of .2 px. It is not fitting 1140.8px within 1141px.

Actual css is narrower than the width spec in both cases, but obviously not enough in Chrome’s case.

Not sure if it will do any good, but I reported the issue to Google.

Hi,

yes, that’s really weird… No idea what’s going on there. I hope that this can be fixed sometime soon!

Best wishes,
Tobias