Search Panes layout not (really) responsive

Search Panes layout not (really) responsive

j.castellij.castelli Posts: 10Questions: 4Answers: 0

Hello everyone,

I have a question regarding the layout of the SearchPanes.
Since I boosted a lot the rendering speed by caching the content, each pane is displayed with a full width when the page is loaded, which is ugly and not friendly at all. I had no problem before when the seeding of the table was slower, but now here is how it looks:

If is resize the window even so slightly, then it's displayed correctly with responsive rows of three to four panes. I know I can force the layout with searchPanes: { layout: 'columns-x' }, but in that case I lose the responsiveness that is quite important since my number of panes can change.

Do you have any insight?

Thanks!

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • j.castellij.castelli Posts: 10Questions: 4Answers: 0

    Thanks for your feedback Colin! My apologies, I should have indeed specified it in my original post:
    * I can't share a link since this is a local environment
    * I haven't been able to replicate the issue unfortunately.

    The best I can do is share my code:

    document.addEventListener("DOMContentLoaded", function(event) {
        if(document.querySelectorAll("#datatableStorefront").length) {
            (async () => {
                let columnsData = await fetch(routes.getColumns).then(response => response.json()).catch(console.log);
                initDatatable(columnsData);
            })();
        }
    });
    
    function initDatatable(columnsData) {
        let table = $('#datatableStorefront').DataTable({
            ajax: routes.getRows,
            deferRender: true,
            columns: columnsData['columns'],
            fixedHeader: true,
            fixedColumns: { left: 3 },
            "autoWidth": false,
            "order": [[ 0, "desc" ], [ 1, "asc" ], [ 2, "asc" ]],
            "columnDefs": [
                {
                    "targets": columnsData['hidden_columns'],
                    "visible": false
                },
                {
                    searchPanes: {show: false},
                    targets: columnsData['hidden_panes']
                },
                {
                    "targets": columnsData['coloured'],
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == 'OK' )
                            $(td).css('background-color', 'rgba(39, 204, 22, 0.5)')
                        else
                            $(td).css('background-color', 'rgba(255, 0, 0, 0.5)')
                    }
                }
            ],
            dom: 'BPQlfrtip',
            "pageLength": 10,
            buttons: [
                {
                    extend: 'colvis',
                    collectionLayout: 'fixed two-column'
                },
                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: ['excel', 'csv']
                },
                {
                    text: 'Refresh cache',
                    action: function (e, dt, node, config) {
                        this.disable();
                        $(".dt-buttons").append("<p id='processing' style='color: #e06100'>Refreshing cache...</p>");
                        (async () => {
                            await fetch(routes.refreshStorefrontsCache).catch(console.log);
                            table.ajax.reload();
                            $("#processing").css("color", "rgb(39, 204, 22)");
                            $("#processing").html("The cache has been refreshed!");
                            setTimeout(function() {
                                $("#processing").fadeOut().remove();
                            }, 3000);
                            this.enable()
                        })();
                    }
                }
            ]
        });
    }
    
  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    If you're not able to replicate it, it's likely to be a local styling issue which we would need to see to be able to progress this,

    Colin

  • fabzfabz Posts: 1Questions: 0Answers: 0

    Hello,
    I had exactly the same problem.
    It was because of the CSS property "transition" inherited from my ResetCSS style sheet :
    * {
    transition: 0.4s;
    }
    Removing it solved the problem.
    Hope it can help.

Sign In or Register to comment.