Bootstrap 4 Conflict
Bootstrap 4 Conflict
hdoran
Posts: 16Questions: 8Answers: 0
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>
This question has an accepted answers - jump to answer
Answers
<
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 usingstyle="width:100%"?Kevin
@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
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
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>