Header dissapears

ASKemp

Very new to this so may be missing something obvious.
I have a .net Core 2.1 app using

<script>
        $(document).ready(function () {
            $.fn.dataTable.ext.errMode = 'throw';

            //$.fn.dataTableExt.oStdClasses.sWrapper = 'dataTables_wrapper container-fluid dt-bootstrap4 table-loading';

            $("#data-table").dataTable({
                order: [[0, "desc"]],
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100, 500, 1000, -1], [10, 25, 50, 100, 500, 1000, "All"]],


                scrollY: '70vh',
                scrollCollapse: true,


                colReorder: {realtime: true},
                stateSave: true,
                responsive: true,
                initComplete: function () {
                    $(this).parents('.table-loading').removeClass('table-loading');;
                    $(this).removeClass("dt-table-loading");
                }
            });

        });
    </script>

When I try to use the scroll options (scroll here) then my table header disappears. It's still there, I can click on it to sort etc. just that it's not visible.
Remove the scroll related options and it's fine

colin

Hi @ASKemp ,

There's nothing obvious in your code that would cause that. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. 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