Space between Header and Body while using ScorllY

Dheerajcode

Hi Team ,

i am trying to use ScrollY option to have infinite scrolling with CheckBox option. Everything runs fine until i use "scrollY":"400px" datatable start showing space between header and body , please see attached image
Image : https://1drv.ms/i/s!AmJ3g246sggog45LuFRDYPLLGq_0_g
Datatable Initialization is as follows

 $('#tblRoomList').DataTable({
                    select: true,
                    "scrollY": "400px",
                    "paging": false,
                    //  "scrollCollapse": true,
                    data: data,
                    "columns":
                    [
                        { "title": "", "data": "", "defaultContent": "" },
                        { "data": "RoomName", "title": "Name" },
                        { "data": 'StyleName', "title": "Seating Style" },
                        { "data": "Capacity", "title": "Capacity" },
                        { "data": "SetUpTime", "title": " Setup Time" },
                        { "data": "ClubName", "title": "Club Mapped", "defaultContent": "Not Mapped" }
                    ],
                    "columnDefs":
                    [

                        {
                            "targets": [0],
                            "orderable": false,
                            "className": 'select-checkbox'
                        },
                       
                    ],
                    select: {
                        style: 'os'
                    },
                });

using latest version
Please help

Thank you
Dheeraj Kumar

allan

Thanks for your question. As noted in the forum rules, please post a 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.

Allan

Dheerajcode

HI allan ,

i tried setting up example but , somehow nothing is rendering on output if add "select" extention

http://live.datatables.net/yuzazunu/16/edit?html,css,js,console,output

see if u can help with this

allan

There was a typo:

</scrpt>

should be:

</script>

http://live.datatables.net/yuzazunu/26/edit

Allan

Dheerajcode

Thanks for the correction but as you can observe there are no check boxes which i tried to add

kthorngren

Added the Datatables select CSS:
https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css

Now the checkboxes appear.

Kevin