Responsive table wider than content area

stl99

Hi,

When I use the new responsive DataTables feature at some widths the table is wider than the actual content area and therefore overlaps my sidebar content.

I already tried to fix this via changing the responsive breaking points but that doesn't seem to work.

Shouldn't the columns automatically disappear once the content width is too narrow so that overlapping doesn't happen...?

Cheers,
Thomas

allan

Hi Thomas,

Can you link me to a test case showing the issue please?

Shouldn't the columns automatically disappear once the content width is too narrow so that overlapping doesn't happen...?

Yes!

Allan

stl99

Sure, here you go http://ecomentotv.staging.wpengine.com/inhalte/carsharing-anbietervergleich/ (e.g. happens at around 840px, just look at the blue control buttons in the last column...)

Thanks!

Cheers,
Thomas

allan

Thanks - yes, I see the problem and its a tricky one!

The problem is basically the images in the first column - they are resizing with the window which means that the size of the first column is changing. The result is that the calculations Responsive has made to decide where the breakpoints are, are simply wrong.

You could add a call to responsive.recalc() on every resize event, but that is going to seriously hurt performance.

With the column widths dynamically changing, there isn't really any way for Responsive to know what to do. I'll try to think about a better solution, but that's really all I've got at the moment!

Allan

stl99

Thanks, I remember that these images made problems when I set up the table and tried to make it responsive with some CSS tricks a couple of months ago...

A bit of a shame now that tables become relevant again for responsive design...

Cheers,
Thomas

stl99

Hi again,

I actually removed the column with the images but the overlapping is still there (around 930px) - any ideas?

Cheers,
Thomas

allan

Thanks for letting me know about that (the link you provided was instrumental to letting me fix it!).

Basically there was a problem with the calculation when the control column was not the first column in the table. I've just committed a fix for this and the nightly is now up-to-date with the fix. Could you possibly try updating an trying that out?

Thanks,
Allan

stl99

Yes, it seems to work fine now - thanks! Even with images in the first column actually, do you think that's solved for good now, too?

BTW: I noticed that the control column can be automatically assigned to the first column but the last column seems to need actual modifications to the HTML table structure (<th class="control"></th> & <td class="control"></td>) - is that so...?

Cheers,
Thomas

allan

Even with images in the first column actually, do you think that's solved for good now, too?

I meant to mention that I suspected this was also fixed. Its not perfect because it isn't recalculating the columns widths, so it won't be optimal, but it should basically work.

BTW: I noticed that the control column can be automatically assigned to the first column but the last column seems to need actual modifications to the HTML table structure

Yes you need to assign the control class. You can use columns.className to do that.

Allan

stl99

Thanks Allan!