DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

DataTables fixed column transparent with Bootstrap 4 striped table

DataTables fixed column transparent with Bootstrap 4 striped table

ierturkierturk Posts: 4Questions: 0Answers: 0
in Free community support

In DataTables example here, when scroll the table to left, fixed cell is transparent on dark rows.
Is this a bug related BS4 or DataTables. If so, is there a workaround to correct it?

Replies

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Bug in the DataTables / Bootstrap 4 integration.

    I hadn't realised that they use rgba for the table (possibly that was added in alpha 6 - or I just clean missed it!):

    .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

    The result is that we get the alpha doubling up.

    Fix is to use:

    table.dataTable.table-striped.DTFC_Cloned tbody tr:nth-of-type(odd) {
    background-color: #F3F3F3;
}
table.dataTable.table-striped.DTFC_Cloned tbody tr:nth-of-type(even) {
    background-color: white;
}

    Thanks for letting me know about this!

    Allan

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Fixed committed here :)

  • ierturkierturk Posts: 4Questions: 0Answers: 0

    Hi Allan, your works is great. Thanks for your answer. It works.

  • ierturkierturk Posts: 4Questions: 0Answers: 0

    Hi Allan, similar problem arises with DT&BS4 Fixed Column, Select and BS4 Hover.

    Please have a look at attached image.

    Regards,
    Ibrahim

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Do you happen to have a link for that as well? If not I'll try to construct a test case when I get a chance.

    Thanks,
    Allan

  • ierturkierturk Posts: 4Questions: 0Answers: 0

    Unfortunately, I don't have one. However, I only added into project like that previous link of your example Select Extension and enable.

    Regards,
    Ibrahim

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Thanks for the info! I'll post back when I've got that fixed as well.

    Allan

  • tom.karez@gmail.comtom.karez@gmail.com Posts: 4Questions: 0Answers: 0

    I have tried to add the "fix" to my css and it still does not work. Striped table, bootstrap with select plug in. My odd rows are illegible as the background-color of the row is not changing leaving white text on an light background. So I am stumped, I can remove striping or I can remove selecting but I want both. Is there anything else I can do to get this to work?

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    This example shows Select being used with Bootstrap 4. Can you explain how it can be modified to not work please? Or even better, just post a link to a test page showing the issue.

    Allan

  • tom.karez@gmail.comtom.karez@gmail.com Posts: 4Questions: 0Answers: 0

    Here is a small sample. I am using the combined files with Jquery, Bootstrap and Select. I did not include the source files so they are included separately. The odd numbered lines are not setting the correct background color leaving them illegible when selected.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no shrink-to-fit=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes" />
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="DataTables/datatables.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="DataTables/datatables.min.css" rel="stylesheet" />

    <title>Utilities Portal</title>


<style type="text/css">
</style>

    </head>
    <body>

                                <table class="table table-bordered table-striped" cellspacing="0" id="tbl_facilities" width="100%">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Position</th>
                                            <th>Office</th>
                                            <th>Age</th>
                                            <th>Start date</th>
                                            <th>Salary</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Name</th>
                                            <th>Position</th>
                                            <th>Office</th>
                                            <th>Age</th>
                                            <th>Start date</th>
                                            <th>Salary</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr>
                                            <td>Tiger Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>$320,800</td>
                                        </tr>
                                        <tr>
                                            <td>Garrett Winters</td>
                                            <td>Accountant</td>
                                            <td>Tokyo</td>
                                            <td>63</td>
                                            <td>2011/07/25</td>
                                            <td>$170,750</td>
                                        </tr>
                           </tbody>
                        </table>

    </body>
    </html>

    $(document).ready(function () { $('#tbl_facilities').DataTable({ "select": true }) } );
  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Are you able to use JSFiddle or http://live.datatables.net to create a test case please?

    Thanks,
    Allan

  • tom.karez@gmail.comtom.karez@gmail.com Posts: 4Questions: 0Answers: 0

    Here is a URL

    https://ibkapps.innsbrook-resort.com/IBKApps/test.html

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Thanks for the link. You are using Bootstrap 3.0.0 on that page. 3.3.7 is the current version of the 3.x releases of Bootstrap. Can you update to that version please? It looks there is an issue with the older version.

    Allan

  • tom.karez@gmail.comtom.karez@gmail.com Posts: 4Questions: 0Answers: 0

    Yes, that was the issue. Thanks.

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Thanks for letting me know - good to hear that worked.

    Allan

  • VimVim Posts: 3Questions: 1Answers: 0

    Hello,

    None of the above solutions works for me.

    In my case, the fixed column is the first column in the table and the cells have a link (anchor tag).

    I am using bootstrap 4 alpha 6

    Any suggestion please?

    Thanks,
    Vim

  • allanallan Posts: 61,740Questions: 1Answers: 10,111 Site admin

    Please link to a test case showing the issue.

    Thanks,
    Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.