Search Panes "layout" property causing the Search Panes to not be responsive

ianoel230982

Link to test case:
https://live.datatables.net/yupucuye/1/edit

Description of problem:
Hi,
I'm using SearchPanes extension with a responsive table and have noticed when i use the "layout" property or SearchPanes, my panes are not responsive. If i omit the "layout" property then they work as i expect.

I've stripped back my test case to the basics and even used the links to the datatables builder files, so i know its not my local copy of datatables that is missing anything.

I've noticed on some of the SearchPane example pages, when the window resizes the layout classes change at different breakpoints, i assume using the 'resizePanes' method, but i do not see that behaviour in my example.

I'm either doing something wrong, or missing something.

Any help appreciated :-)
Thanks.

colin

Thanks for that test. I've taken a look, and it appears to be working as expected to me!

With layout present, the SearchPanes is forced to be three-panes wide, so you always see three.

Without that setting, SearchPanes determines the optimum number of panes to display, so the pane width does

If I'm being daft and missing something, please can you explain what you're expecting to happen.

Colin

ianoel230982

Hi,
I might be misunderstanding, I thought the layout property would show that required number of columns on desktop,and with responsive set to true, when screen width changes narrower, the search panes would respond appropriately, leading them to stack on top of each other on mobile.

This example from the docs shows the layout:column-6 but when I view on mobile, the panes have vertically stacked.

https://datatables.net/extensions/searchpanes/examples/initialisation/layout.html

So I'm a bit unclear on what behaviour should be occurring.

Thanks, Ian.

allan

Responsive has no impact on SearchPanes. Responsive is an extension for DataTables which will collapse columns down to fit in the space available. It doesn't impact SearchPanes at all.

The difference between your test case and the second link appears to be that the test case is using Bootstrap, and our Bootstrap integration code isn't collapsing down like the DataTables default styling does (I need to have a think about which is the correct behaviour - the Bootstrap one is behaving like I'd expect it to, given it is forced to 6 column layout, but the DataTables one is a bit more intuitive).

I would go with what Colin says and remove the layout: "columns-3", - let SearchPanes figure out what layout to use.

Allan

ianoel230982

Thanks for the response. Personally I'd expect Panes to be responsive regardless of what CSS framework (or not) I'm using, especially if I have "responsive:true". Maybe searchpanes could have this option added in, perhaps something similar to

searchPanes:{ responsive:true, layout: ["columns-sm-12", "columns-md-3", "columns-lg-4"]

Just a suggestion of course.

I can't lose the bootstrap functionality, so for now I'll remove the layout property to get the responsive behaviour.

Appreciate your response. Keep up the great work.

allan

Yeah - there is something not quite right. I'll have a proper think about it

Allan