Material Design checkbox creates a new row when inside datatables

Question

does anyone uses this link

i am trying to use this checkbox

and the tag of them is like this.

<input type="checkbox" id="md_checkbox_1" class="chk-col-red" checked />
<label for="md_checkbox_1">RED</label>

However i am trying to encorporate that in datatables and its working. here is the sample

the problem is the label next to the checkbox is empty i wonder why it creates so large space below.

I am very frustrated trying all the possibilities just to remove that does anyone encounter this?

Here is my code where I add the checkbox

var link = '../../php/submit_mail.php?key_id=' + arr_id.join();
        DTable = $('#tbl_user').DataTable({
                    "destroy": true,
                    "order": [],
                    "bProcessing": true,
                    "aLengthMenu": [[10,25, 50, 75, -1], [10,25, 50, 75, "All"]],
                    "iDisplayLength": 10,
                    "sAjaxSource": link,
                    'columnDefs': [{
                        'targets': 0,
                        'render': function (data, type, row, meta){
                            return '<input type="checkbox" id="md_checkbox_' + data + '" class="filled-in chk-col-blue chkall">' +
                                   '<label for="md_checkbox_' + data + '"></label>';
                        }
                    },
                    { targets: 0, orderable: false },
                    { className: "custom_right", "targets": [1] },
                    ],
                    "aoColumns": [
                        { mData: 'id' },
                        { mData: 'col1' }
                    ]
                });

Answer 1

You have to change [type="checkbox"] + label { height: 22px; } label { margin-bottom: 0px; }