fixedHeader not inheriting Bootstrap4 theme

faulander

This is my table definition:

    <script type="text/javascript" class="init">
        let table = $('#tickets').DataTable({
            fixedHeader: true,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Suche nach ..."
            },
            "ajax": "http://localhost:8080/api",
            "columns": [
                {"data": "id"},
                {"data": "kurkan"},
                {"data": "sb"},
                {"data": "typ"},
                {"data": "kategorie"},
                {"data": "betreff"},
                {"data": "aufwand"},
                {"data": "erstellungsdatum"},
                {"data": "letzte_aenderung"},
                {"data": "SB_derzeit"},
                {"data": "wichtig"},
                {"data": "inderZeit"},
                ],
            "paging": false,
            "order": [
                [11, "desc"]
                ],
            "columnDefs": [
                {"visible": false, "targets": 0},
                {"visible": false, "targets": 10},
                {"visible": false, "targets": 11},
                {"width": "3rem", "targets": 1},
                {"width": "1rem", "targets": 2},
                {"width": "1rem", "targets": 3},
                {"width": "8rem", "targets": 4},
                {"width": "1rem", "targets": 6},
                {"width": "6rem", "targets": 7},
                {"width": "6rem", "targets": 8},
                {"width": "1rem", "targets": 9},
                {classname: "dt-right", "targets": 6},
                ],
            "fnCreatedRow": function( row, data, dataIndex ) {
                console.log(data.wichtig);
                if ( data.inderZeit == true ) {
                    $(row).addClass( 'intime' );
                } else {
                    $(row).addClass( 'outoftime' );
                }
                if ( data.wichtig == "tickets__weins") {
                    $(row).addClass( 'wichtig' );
                }
            },
        });
    </script>

and this is my table definition:

<

div id="app">

<

table id="tickets" class="table table-dark .table-sm" style="width:100%">
```

My Problem:
when i scroll down, the fixedHeader is blended it, but has white background and i am using the dark them from bootstrap4. How do i get fixedHeader to inherit the style from the table?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

faulander

fixed it myself. Maybe for your information: these settings do not inherit from the bootstrap colors, but are hardcoded in white:
.table.dataTable.fixedHeader-floating, .table.dataTable.fixedHeader-locked { background-color: #212529 !important; }

I have overwritten the settings and now it works.