After successfully building my application on Bootstrap 4 and incorporating Bootstrap-Table and Bootstrap-DateTime picker plugins, I ran into display issues when trying out Bootstrap-Select. It was then that things went haywire. Upon closer investigation, I discovered that bootstrap.min.css was the cause of the problem (other files are yet to be confirmed). Whether I used the version (bootstrap-3.3.7) provided with Bootstrap-Select or the original one from Bootstrap 4 that I had been using so far. Below you'll find the rendering of both css files.
Here is the rendering issue encountered with css from bootstrap-3.3.7 - The active tab does not display content until clicked on; controls are misaligned and characters appear smaller: https://i.sstatic.net/Lfp10.png
https://i.sstatic.net/6ypRC.png
The rendering issue observed with css from bootstrap 4 - The select box fails to display options, but character rending is correct: https://i.sstatic.net/ToKqc.png
Finally, here is a snippet from my html file:
//**** THIS DOES NOT WORK IF PLACED INSIDE $(document).ready(function () {} ****
$('#table').bootstrapTable({
url: 'GetListeDemandeurs',
locale: 'fr-CA',
pagination: true,
paginationLoop: true,
search: true,
clickToSelect: true,
singleSelect: true,
sortable: true,
sortOrder: 'asc',
idField: 'Code_Demandeur',
sortName: 'Code_Demandeur',
});
var $table = $('#table');
//**** END NON-WORKING SECTION ****
//**** Instance de la Bootstrap-DateTime picker ****
$('.form_date').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
//**** FIN Bootstrap-DateTime picker ****
$(document).ready(function () {
var selectedRecord = null;
$(function () {
//**** Click action for the row ****
$table.on('click-row.bs.table', function (e, row, $element) { //**** COMMENTED SECTION: BUTTON DOES NOT FUNCTION ****
$('.success').removeClass('success');
$($element).addClass('success');
//**** Encapsulating the chosen row ****
var index = $table.find('tr.success').data('index');
selectedRecord = $table.bootstrapTable('getData')[index];
//**** Enable modify and delete buttons upon selecting a row ****
document.getElementById('btnModif').disabled = false;
document.getElementById('btnSupp').disabled = false;
});
});
});<!DOCTYPE html>
<html>
<head>
@ {
ViewBag.Title = "Applicants (List)";
}
<title></title>
@* ========================================= *@
@* **** Required meta tags **** *@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@* **** END required meta tags **** *@
<script src="~/Scripts/jquery-3.3.1.min.js"></script> @**** JQUERY Version **** *@
@* **** Bootstrap-Select **** *@
<script src="~/Scripts/umd/popper.min.js"></script>
@*<script src="~/Scripts/jquery-3.3.1.min.js"></script>*@
<script src="~/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<link href="~/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="~/Content/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="~/Scripts/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="~/Scripts/i18n/defaults-fr_FR.min.js"></script>
@* **** FIN **** *
...
</body>
</html>