Bootstrap 4 Conflict

hdoran · September 2020

Below is HTML that can be used to replicate my issue. I'm migrating from bootstrap 3.4.1 to 4.1.3 and doing checks to verify all aspects of design work in the same way. I'm experiencing an issue with a table that does not occur under bootstrap 3.4.1 and so I am seeking code advice.

When using bootstrap 3.4.1 if I use <table id="example" class="display table table-striped table-hover table-responsive"> my table is displayed exactly as I want. It has the datatables features and it is responsive. Throughout, by responsive I mean that it has the slider below the table. However, this same exact code when using bootstrap 4+ does not yield a responsive table unless I add in style="width:100%".

Here is a summary of what I observe under Bootstrap 4+

1) When using <table border="1" class="table table-striped table-hover table-responsive" id="example" style="width:100%"> the table displays in the browser exactly as I would want.
2) When using <table border="1" class="table table-striped table-hover table-responsive" id="example"> the table has the datatables features I want from my .js code but the table is no longer responsive
3) When using <table border="1" class="table table-striped table-hover table-responsive" id="foo"> the table is responsive but does not have the datatables features I want.

It seems to be a conflict also with the .js code I am using to render the table for the datatables package. That code is:

    <script>$(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            });
        });

        var table = $('#example').DataTable({
            orderCellsTop: true,
            fixedHeader: true
        });
    });
     </script>

My question is whether I have missed anything in my migration to bootstrap 4+ from required datatables js or css or if there is a bug in my js code above to render the table that is causing the issue? I'm using Pandas/python to generate the HTML tables and I cannot use the functions in Pandas to pass a style:width argument so I'd like to use the code <table id="example" class="display table table-striped table-hover table-responsive"> as I use now with bootstrap 3.4.1.

Below is HTML for to reproduce my issue

 <!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <!-- Bootstrap core CSS -->

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <!--<link href="static/bootstrap.min.css" rel="stylesheet">-->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
            
        <!-- these two scripts below are specifically to support plotly output -->
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

    </head>
    <body>

        <br> 
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-9" style="background-color:lightskyblue;">
                    Test
                </div>
                <div class="col-sm-3" style="background-color:white;">
        <table border="1" class="table table-striped table-hover table-responsive" id="example" style = "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>
        <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>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
                </div>
            </div>
        </div>
        <!-- End paneling -->

        <!-- styling for tables -->
        <script type='text/javascript'>
          window.onload = function() {
            const thead = document.querySelectorAll('.table > thead');
            thead.forEach(e => e.classList.add('thead-dark'));
          }
        </script>

    </body>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <script type ="text/javascript" src = "static/toggleFrequency.js"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

    <!--These next two lines are experimental for now. They do the reorder -->
    <!-- Also, see reorder argument in colulmsearcher.js -->
    <link href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>


    <!-- For column visibility -->
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>

    <!-- script to create searchable column headers -->
    <!--<script type = "text/javascript" src = "/static/columnSearcher.js"> </script>-->
    <script>$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        });
    });

    var table = $('#example').DataTable({
        orderCellsTop: true,
        fixedHeader: true
    });
});
 </script>

    <!-- for exporting data to csv file -->
   <script type = "text/javascript" src = "https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"> </script>
   <link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" rel="stylesheet">
    <script type="text/javascript" src = "/static/form_items_table.js"> </script>

    <!-- These below are needed for the live search box to work -->
    <!-- Latest compiled and minified CSS -->

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
</html>

kthorngren · September 2020

When using

<

table border="1" class="table table-striped table-hover table-responsive" id="example" style="width:100%"> the table displays in the browser exactly as I would want.

It is recommended to use style="width:100%". See this example for more details. Is there a problem with using style="width:100%"?

Kevin

hdoran · September 2020

@kthorngren thanks for your comment. Yes, the actual HTML table is dynamically generated using this function below from Python Pandas. It does not have a way to pass a style attribute. So, I do not believe using that is an option, if it were I think the issue would be solved.

https://pandas.pydata.org/pandas-docs/version/0.19.2/generated/pandas.DataFrame.to_html.html

kthorngren · September 2020

Before loading Datatables you can use the jQuery css() method to add the attribute to the generated table. Something like this:

$('#myTableId').css('width', '100%');

Kevin

hdoran · September 2020

This is working on my test case. For others interested, this is fixed using this at the bottom of the document before datatables is loaded.

<script>$('#example').css('width', '100%');</script>

and not

<style>$('#example').css('width', '100%');</style>

Bootstrap 4 Conflict

Bootstrap 4 Conflict

Answers

Howdy, Stranger!

Categories

DataTables

Bootstrap 4 Conflict

Bootstrap 4 Conflict

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables