searchpanes buttons (e.g. collapse) not working

searchpanes buttons (e.g. collapse) not working

tacman1123tacman1123 Posts: 168Questions: 39Answers: 1
edited March 2023 in Free community support

Wahoo, I finally have a live site that doesn't require login using SearchPanes, and I'm really happy with it.

https://www.museado.org/es/esquina/obj/visitor-browse

It works great, except that the buttons to collapse all and clear all don't work, and I'm not sure where to look to solve this.

I suspect it has something to do with the fact that I moved the searchpanes to the sidebar. It could also be because there is so much data in the searchpanes, making it very powerful for anyone who is trying to explore the museum database.

        let dt = new DataTables(el, setup);
        dt.searchPanes();
        console.log('moving panes.');
        $("div.search-panes").append(dt.searchPanes.container());

The html:

    <div class="dtsp-verticalContainer row">
        <div class="search-panes xxdtsp-verticalPanes col-3">
        </div>
        <div class="xxcontainer col-9">
            {{ block('gridTable') }}
        </div>
    </div>

I'm using bootstrap 5 and (obviously) hacking away trying to get it to look right. But maybe that's not the issue. FWIW, this is an ajax-loaded site. And all the columns are created in javascript as well.

Anyway, thanks so much for releasing searchPanes!

This question has an accepted answers - jump to answer

Answers

  • tacman1123tacman1123 Posts: 168Questions: 39Answers: 1

    it's not moving the searchpanes. I still don't know what it is, though.

    The fields are loaded by JSON first, then when the load finishes initDatatables() is called, with the data and searchPanes data are sent in the callback

                ajax: (params, callback, settings) => {
    
                            let callbackValues = {
                                draw: params.draw,
                                data: d,
                                searchPanes: searchPanes,
                                recordsTotal: total,
                                recordsFiltered: total
                            }
                            callback(callbackValues);
    

    where searchPanes is the data dumped via console.error when viewing the page.

  • tacman1123tacman1123 Posts: 168Questions: 39Answers: 1

    There are no event handlers on the buttons. The buttons within the searchPanes work fine though.

    FWIW, I do load a lot of the datatables plugins, though. Maybe there's a conflict with all of them being loaded?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    You've got a floating element at the top of the page which is intercepting the clicks. You need to add padding to the body element. As the Bootstrap documentation notes:

    Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

    Allan

  • tacman1123tacman1123 Posts: 168Questions: 39Answers: 1

    Thanks, Allan!

Sign In or Register to comment.