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

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

ianoel230982ianoel230982 Posts: 12Questions: 4Answers: 0

Link to test case:

Description of problem:
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 :-)

This question has an accepted answers - jump to answer


  • colincolin Posts: 15,140Questions: 1Answers: 2,586

    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.


  • ianoel230982ianoel230982 Posts: 12Questions: 4Answers: 0

    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.

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

    Thanks, Ian.

  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin

    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.


  • ianoel230982ianoel230982 Posts: 12Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,584Questions: 1Answers: 10,084 Site admin
    Answer ✓

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


Sign In or Register to comment.