Incorrrect select checkbox visualisation if in the first column of a responsive table

tbrcrl

Hello,
I am using the “Select” and the “Responsive” extensions in a table.
If the Select checkbox is put in the first column, the checkbox itself is hidden and the “+” icon moves outside of the checkbox cell, also if in the relevant cell there is enough space for both. This behavior is not present if the column with the Select checkboxes is moved on the 2nd or higher value column.

I created two "DataTables live"
http://live.datatables.net/sihowadu/1/ with the code relevant to my case
http://live.datatables.net/bupixixo/1/ with the code relevant to the a plain, standard Data Tables example
The incorrect behaviour is present in both cases.

Here the HTML of my case

<div class="row row-table-mrg-b">
    <div class="col-xs-12">
        <table id="table_dashboard-ps" class="compact stripe hover no-tfoot dt-responsive" data-order='[[ 5, "desc" ]]' data-page-length="25"> 
            <thead> 
                <tr>                                                
                    <th data-class-name="column-table-brd-r dt-center select-checkbox" data-orderable="false">SELECT</th>
                    <th data-class-name="column-table-brd-r dt-head-center">CLAIM #</th>                                        
                    <th data-class-name="column-table-brd-r dt-head-center">PHASE / STATUS</th>                                                
                    <th data-class-name="column-table-brd-r dt-head-center dt-body-right">OPEN. DATE</th>
                    <th data-class-name="column-table-brd-r dt-head-center dt-body-right">FILING DATE</th>
                    <th data-class-name="column-table-brd-r dt-head-center dt-body-right">COMPL. DATE</th>
                    <th data-class-name="column-table-brd-r dt-head-center">CUSTOMER</th>
                    <th data-class-name="column-table-brd-r dt-head-center">PART</th>
                    <th data-class-name="column-table-brd-r dt-head-center">DESCRIPTION</th>
                    <th data-class-name="column-table-brd-r dt-center">Q.TY</th>
                    <th data-class-name="column-table-brd-r dt-head-center">REPORTED DEFECT</th>
                    <th data-class-name="column-table-brd-r dt-head-center">RECOGNIZED DEFECT</th>
                    <th data-class-name="column-table-brd-r dt-head-center dt-body-right">REQ. VALUE</th>
                    <th data-class-name="column-table-brd-r dt-head-center dt-body-right">REC. VALUE</th>
                    <th data-class-name="column-table-brd-r dt-head-center">CREDIT / DEBIT NOTE</th> 
                </tr>                                             
            </thead>                                         
            <tbody> 
                <tr>                                                
                    <td></td>
                    <td>TC1234567</td>                                              
                    <td>Filing incomplete</td>                                                
                    <td>01.01.2015</td>
                    <td>01.02.2015</td>
                    <td>01.03.2015</td>
                    <td>CompanyA</td>
                    <td>GH5678956</td>
                    <td>suola a tre barre</td>
                    <td>3</td>
                    <td>usura suole</td>
                    <td>uso improprio</td>
                    <td>4500,00 €</td>
                    <td>0,00 €</td>
                    <td>N/A</td> 
                </tr>

and the JS

$(document).ready( function () {
            $('#table_dashboard-ps').DataTable({            
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                fixedHeader: {
                    headerOffset: 50
                },
                columnDefs: [
                    { responsivePriority: 1, targets: 0 },
                    { responsivePriority: 2, targets: 14 },
                    { responsivePriority: 3, targets: 1 },
                    { responsivePriority: 4, targets: 13 },
                    { responsivePriority: 5, targets: 11 },
                    { responsivePriority: 6, targets: 7 },
                    { responsivePriority: 7, targets: 9 },
                    { responsivePriority: 8, targets: 6 },
                    { responsivePriority: 9, targets: 2 },
                    { responsivePriority: 10, targets: 5 },
                    { responsivePriority: 11, targets: 8 },
                    { responsivePriority: 12, targets: 12 },
                    { responsivePriority: 13, targets: 10 },
                    { responsivePriority: 14, targets: 3 },
                    { responsivePriority: 15, targets: 4 }
                ],
                "pagingType": "full_numbers",
                "language": {
                    searchPlaceholder: "Any text in the table",
                    "search": "Search",                 
                    "paginate": {
                        "first": "<<",
                        "last": ">>",
                        "next": ">",
                        "previous": "<"
                    }
                }
            });
            $('div.dataTables_filter input').addClass('form-control');
            $('div.dataTables_length select').addClass('form-control');         
        });

Any support will be greatly appreciated.

Thanks

allan

The issue here is that you are attempting to use the same column for two different thing - the Responsive control and the Select checkbox. That isn't going to work since the click event will trigger both.

You need to separate the two. I would suggest putting the Responsive control into its own column.

Allan