Search Panes items hidden when using mousewheel, show flicker in/out using actual scroll bar

cdalton

Certain filter pane items don't show up when the page is initially loaded. If you sort the DataTable, they'll sometimes show up, then if you use the actual scrollbar they'll flicker in and out. Anyone else have this issue or know a solution?

Here's a gif of what I'm talking about: https://imgur.com/a/CEaMiuO

I'm not sure where the '8' is coming from in the pane either... it's this element:

<div class="dts_label" style="display: block;">8</div>

$(document).ready(function () {
    var table = $('#files-tbl').DataTable({
        dom:
            "<'row'<'col-sm-2'l><'col-sm-6'B>" + "<'col-sm-4'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>",

        "processing": true,
        "ajax": {
            "url": "/_get_files2/" + urlParams.get('job_id2'),
            "dataSrc": 'data'
        },
        deferRender: true,
        responsive: {
            'details': {
                'type': 'column',
                'target': 0
            }
        },
        'lengthMenu': [[50, 100, 200, -1], [50, 100, 200, 'All']],
        "searching": true,
        rowGroup: {
            dataSrc: ['Group 1', 'Group 2', 'Group 3']
        },
        buttons: {
            dom: {
                container: {
                    className: ''
                }
            },
            buttons: [
                {
                    text: "Filter Files",
                    className: 'btn btn-secondary btn-sm filter-files'
                },
                {
                    text: 'Download Selected',
                    action: function () {
                        let urls = [];
                        let selected = table.rows({selected: true}).data();

                        function download_files(files) {
                            function download_next(i) {
                                if (i >= files.length) {
                                    return;
                                }
                                var a = document.createElement('a');
                                a.href = files[i].download;
                                a.target = '_parent';
                                // Use a.download if available, it prevents plugins from opening.
                                if ('download' in a) {
                                    a.download = files[i].filename;
                                }
                                // Add a to the doc for click to work.
                                (document.body || document.documentElement).appendChild(a);

                                if (a.click) {
                                    a.click(); // The click method is supported by most browsers.
                                } else {
                                    $(a).click(); // Backup using jquery
                                }
                                // Delete the temporary link.
                                a.parentNode.removeChild(a);
                                // Download the next file with a small timeout. The timeout is necessary
                                // for IE, which will otherwise only download the first file.
                                setTimeout(function () {
                                    download_next(i + 1);
                                }, 500);
                            }

                            // Initiate the first download.
                            download_next(0);
                        }

                        $.each(selected, function () {
                            urls.push({download: this['URL'], filename: this['File Name']})
                        })

                        download_files(urls)
                    },
                    className: 'btn btn-success btn-sm d-none btn-dl'
                },
                {
                    text: 'Delete Selected',
                    action: function () {
                        let selected = table.rows({selected: true}).data();

                        $.each(selected, function () {
                            let url = this['DURL']
                            $.post(url)


                        })
                        setTimeout(function () {
                            reload_table();
                        }, 1000);


                    },
                    className: 'btn btn-danger btn-sm d-none btn-delete'
                }
            ]
        },
        columns: [
            {data: null},  // 0
            {data: 'checkbox', className: 'select-checkbox'},
            {data: 'Job ID'},
            {data: 'Name', className: "all"},
            {data: 'File Size', className: "not-mobile"},
            {data: 'Last Modified', className: "not-mobile"},  // 5
            {data: 'Group 1'},
            {data: 'Group 2'},
            {data: 'Group 3'},
            {data: 'URL'},
            {data: 'DURL'}, // 10
            {data: 'Uploaded By', className: "not-mobile"},
            {data: 'File Name'}

        ],
        searchPanes: {
            cascadePanes: true
        },
        select: {
            select: "os",
            selector: ':nth-child(2)',
        },


        'columnDefs':
            [
                {
                    'data': null,
                    'defaultContent': '',
                    'className': 'control',
                    'orderable': false,
                    'targets': 0
                },
                {
                    targets: [2, 6, 7, 8, 9, 10, 12],
                    "visible": false,
                    emptyMessage: "<i>EMPTY</i>",
                    dataLength: 10,
                    layout: 'columns-4',
                    className: 'select-checkbox',
                },
                {
                    targets: [7, 9, 10, 11, 12],
                    "searchable": true
                },
                {
                    targets: 3,
                    "render": function (data, type, row, meta) {
                        if (type === 'display') {
                            data = '<a href="' + row.URL + '">' + data + '</a>';
                        }
                        return data
                    },

                },
                {
                    searchPanes: {
                        show: true,
                    }, targets: [6, 7, 8]
                },

                {
                    searchPanes: {
                        show: false,
                    }, targets: [5, 11]
                }
            ]

    });

    table
        .on('select', function (e, dt, type, indexes) {
            if (table.rows({selected: true}).count() >= 1) {
                $('.btn-dl').removeClass("d-none")
                $('.btn-delete').removeClass("d-none")
            } else {
                $('.btn-dl').addClass("d-none")
                $('.btn-delete').addClass("d-none")
            }
        })

        .on('deselect', function (e, dt, type, indexes) {
            if (table.rows({selected: true}).count() >= 1) {
                $('.btn-dl').removeClass("d-none")
                $('.btn-delete').removeClass("d-none")
            } else {
                $('.btn-dl').addClass("d-none")
                $('.btn-delete').addClass("d-none")
            }
        });

    table.buttons('.filter-files').nodes().attr("data-target", "#file-filter").attr("data-toggle", "collapse")

    var reload_table = function reload() {
        table.ajax.reload()
    }


    table.searchPanes.container().prependTo($('#filter-area'));
    $(document).on('click', '.refresh_', function () {

        reload_table()
    });
});

colin

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