Selected row bg not changed (Bs 3 legacy) and fixedColumns().relayout is not a function

kalman.albert@promax.ro

Hello there,

In the first place, a styling error:
In the Bootstrap 3 Legacy version, on the selected row the background is not blue (as usually). Only the text color is changing.

In Datatable 10.x, I used the below code very often.
It is a mix of BS3 with some css flex classes from BS4, but it works.

In DataTable 1.11.5 with fixedColumns 4.0.2, is not working anymore.

Is there a reason? Is relayout retired?

Link to test case:
live.datatables.net/wufajoho/4/edit

Error messages shown:
Uncaught TypeError:
$table.columns.adjust(...).fixedColumns(...).relayout is not a function

Also it is weird (at least for me) that calling

$table.columns.adjust().fixedColumns().fixedColumns().fixedColumns().fixedColumns()

is not a problem

Javascript

$(document).ready( function () {
 
    var $table = $('#example').DataTable( {
      
      "dom": "<'panel panel-info d-flex flex-column flex-fill flex-grow-1 h-100'<'panel-heading p-1 clearfix'<'pull-right dataTables_buttons'B><'dataTables_crud_buttons'>><'panel-body d-flex flex-column flex-fill flex-grow-1 h-100'" +
      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
      "<'row d-flex flex-column flex-fill h-100'<'col-sm-12 d-flex flex-column flex-fill flex-grow-1 h-100'tr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>> >>",
      
        scrollY:        "300px",//resizeDataTableBody(),//
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,

        fixedColumns:   {
            left: 1,
            right: 1
        },
        select: true
    } );
  
    $($table.table().container()).addClass("d-flex flex-column flex-fill flex-grow-1 h-100 border border-red");
  
    var debounce = function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

    
    var resizeDataTableBody = debounce(function() {
        // All the taxing stuff you do
        var $t = $( $table.table().node() );

        var $scrollBody = $t.closest('.dataTables_scrollBody');
        var $scrollHead = $scrollBody.prev('.dataTables_scrollHead');
        var $scrollContainer = $scrollBody.closest('.col-sm-12.d-flex');
        var $bottom = $scrollContainer.closest('.panel-body').find('.row:nth-child(3)');

        var wHeight = $scrollContainer.height();
        var header = $scrollHead.height();
        var bottom = $bottom.height();

        var ret =  Math.max(wHeight - header - bottom, 50);

        $scrollBody.css('max-height',ret);

        console.log('some heights',wHeight, header, bottom,ret );
        //console.log('weird?',$table.columns.adjust().fixedColumns().fixedColumns().fixedColumns().fixedColumns());

        $table.columns.adjust().fixedColumns().relayout();

        return ret;


    }, 500);
  
    $(window).on('resize', resizeDataTableBody);
  
    setTimeout(resizeDataTableBody, 100);
} );

Thank you

colin

The FixedColumns extension had a complete rewrite last year to use sticky features. Because of this the relayout() is no longer needed, the code is much smarter than it was before.

If you are seeing a problem, please let us know, we'd be happy to take a look,

Colin

kalman.albert@promax.ro

Thank You Colin.
I will.

kalman.albert@promax.ro

In Bootstrap 3 Legacy version it looks like FixedColumns extension css is messing up select extension css

Simply enabeling the FixedColumns css link in the header, hides the background of select extension.

Link to test case:
http://live.datatables.net/todesuqo/2/edit

colin

Thanks for the test case, but it looks the FixedColumn extension isn't active there, so it's not demonstrating the issue.

Colin

kalman.albert@promax.ro

Yes Colin, it is not activated and the select background shows itself. If you activate the FixedColumn (like in the first test case where FixedColumn was included with the whole Datatable package), the select background is not showing anymore.
Please see it for yourself: the activated one here:

My solution was this:

/* reset the trouble makers */
table.dataTable.table-striped tbody tr.odd td {
    background-color: initial;
}
table.dataTable tbody tr td {
    background-color: initial;
}
/* the fixed css */
table.dataTable.table-striped tbody tr.odd:not(.selected) td {
    background-color: #f9f9f9;
}
table.dataTable tbody tr:not(.selected) td {
    background-color: #fff;
}

Not related with the case but another css problem in BS3 legacy (too small to make another discussion only for this).
Can't close the modal editor from the close button (that little x) because mouse click is blocked by postition: absolute; from DTE_Header. The solution is use of z-index.

div.DTE div.DTE_Header{
    z-index:1;
}

Thank you.

allan

The latest nightly builds fix this issue: http://live.datatables.net/todesuqo/5/edit .

We'll be doing releases of the software soon, as there are a bunch of changes to how the row selection colouring works.

Allan

kalman.albert@promax.ro

Thank you Allan