Vertical SearchPanes issue with Responsive Tables

gruskada

When you use SearchPanes with Responsive, while Responsive does hide columns with a "+" at the beginning of a row - it doesn't hide the right amount of columns, and the table still overflows.

http://live.datatables.net/wamehoha/1/edit?js,output

If you resize the output pane in JS Bin, it doesn't start collapsing until it's well past the viewport (about the same width as the vertical tabs). I don't see any event I can hook into to modify this myself.

Any help with this would be greatly appreciated. Thanks.

This is a duplicate of https://datatables.net/forums/discussion/62046/searchpanes-with-responsive-tables#latest , which was marked as "answered", but the OP didn't include the requested test case, so it was never resolved. I posted there as well, but I'm not sure anyone saw it, as the question was old and was already marked as answered.

sandy

Hi @gruskada ,

Thanks for creating a test case for this. Something isn't right there. I've raised an issue internally (DD-1918 for my reference) and will report back here when there is an update.

We will use this post to track the issue rather than the old one. I' ll also going to put a note on the other post to reflect this.

Thanks,
Sandy

gruskada

Thanks, @sandy.

sandy

Hi @gruskada ,

We've discussed this and we think that seeing as this is a custom DOM layout there isn't a source code change to be made here. Instead, the change lies in the setup.

Take a look at this example. I think that it does what you want it to do. There are a couple of changes to the html, the css and the js here to bring SearchPanes outside of the DataTables container, rather than being within it.

I'll update the example on the site to also show this setup too. This will be available when SearchPanes is next releases, which we hope will be within the next few weeks.

Thanks,
Sandy

gruskada

Thank you, @sandy! This solution works. Thanks also to you and the team for making this great extension - it was exactly what we were looking for.