Datatable Custom Toolbar Not Working With Select2 CSS - laravel

Question

This is the code
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- problem lays here -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: "{{ route('users.index') }}",
dom: '<l<"toolbar">f>rtip',
initComplete: function(){
$("div.toolbar").html('<div style="float:left;margin-left:4px;"><select class="form-control select2bs4 select2-hidden-accessible trash_all" style="width:140px;height:32px;margin-left:10px;" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19">Bulk Actions</option><option data-select2-id="38" value="trashAll">Trash</option></select></div><div style="float:left;margin-left:20px;"><select onchange="window.location = this.options[this.selectedIndex].value" class="form-control select2bs4 select2-hidden-accessible download-doc" style="width:140px;height:32px;margin-left:10px;padding-bottom:5px"" data-select2-id="17" tabindex="-1" aria-hidden="true"><option selected="selected" data-select2-id="19" value="{{route('users.index')}}">Download</option><option data-select2-id="38" value="{{route('users.pdf')}}">PDF</option><option data-select2-id="39" value="{{route('users.excel')}}">XLS</option><option data-select2-id="39" value="{{route('users.word')}}">Doc</option></select></div>');
},
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'roles', name: 'roles'},
{data: 'status', name: 'status'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$("div.toolbar").css("float", "left");
$('#roles').select2({
ajax: {
url: '{{ url('searchrole') }}',
processResults: function(data){
return {
results: data.map(function(item){return {id: item.id, text: item.name} })
}
}
}
});
When I remove this code
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
Custom toolbar is working
But, when I let the code above exist, custom toolbar element is gone. I should make it exist because select2 not working if I remove code above.

Answer 1

You can display those select controls by doing this:
(1) Un-comment your select2.min.css resource again.
(2) Remove this class from your code: select2-hidden-accessible. It appears in 2 places in your initComplete function and is causing your controls to be hidden.
(There may be other tweaks you need to make, depending on how the remaining classes in that block of HTML code interact with the select2 CSS.)