Responsive Doesn't Work When Column Headers Overflow

guillochon

So responsive works great when the column contents get too large, however it seems like the column headers do not figure into the responsive logic, so long column headers will result in overflow without triggering the responsive behavior. This is often an issue when you end up with column headers that are longer than the column contents. Is there any way to make the headers themselves trigger the responsive behavior?

guillochon

Upon further testing I am not entirely sure that the column headers are the culprit, but I am not sure what to try next. If you want to see the overflow in action, visit https://sne.space and then show the "aliases" column via the column visibility button. Then, continue to show columns, you'll find that the responsive interface doesn't appear until several columns have overflowed.

johnvndnbrk

Hello guillochon:

Nice DataTables grid. I could reproduce what I believe you are referring to. I use the responsive option by adding responsive to the table's class. When my grid renders I can see responsive when I view the rendered HTML. I don't see this in your table, even though it appears to be responsive prior to making the aliases column visible. How are you adding the responsive feature to your table? Below is what I see for one of my tables after it renders to the browser.

<table class="table responsive dataTable no-footer dtr-inline" id="ApplicationList" role="grid" aria-describedby="ApplicationList_info" style="width: 100%;">

John

allan

Hi,

The headers are used in the Responsive calculation, so there is something else going on here.

Could you try using the nightly versions of DataTables, Buttons and Responsive please? There have been a few changes which might help.

If that doesn't help I'll try to download your page when I get a chance next week and see what is happening.

Allan

guillochon

Hi, sorry for the belated reply, but I've switched to the nightly build and I'm still seeing the same overflow.

I will note that the responsive module does seem to work fine on a mobile phone, it's just in a desktop browser that it doesn't seem to behave. I also tried on an iPad and it wasn't working properly there either. It seems like the responsive module believe the window is a lot wider than it actually is when it's on a desktop.

guillochon

@johnvndnbrk I'm adding the responsive feature via the jQuery call:

            responsive: {
                details: {
                    type: 'column',
                    target: -1
                }
            }

guillochon

Hi all, any chance I could get some guidance on what to try next? The responsive is not really working well at all, and it's not clear what else I can do (already tried the nightly with no visible difference).

Thanks!

allan

I haven't had a chance to look into this yet I'm afraid. I will post back here when I do - hopefully in the next few days or the start of next week. If this is urgent priority support is available.

Allan

allan

So its quite a complicated issue this one. The error comes from the use of the not-mobile class for the xraylink columns (and others), but you have that column as visible: false.

The result is that Responsive doesn't calculate a width for that column, but it does try to include it in layouts which are not mobile. This of course results in an error.

If you simply remove not-mobile is works as expected (I've only tested it with the nightly - I expect it should work with the release versions as well).

I'm not sure what change, if any, is required in Responsive here as it is a configuration error. The column can't be visible:false and also be told to be displayed in non mobile layouts. I'll have a think on this, but for now just remove not-mobile.

Allan

guillochon

WONDERFUL @allan, that did it! Was something I had changed a few weeks ago but didn't notice the responsive issues till much later. Thanks very much for figuring it out!