Topic: MDB Bootstrap Support
Hello Support, Thank you for your product that are great.
I am having an error on my page it maybe a CSS conflict:
1. I have 3 data tables on an administration summary page. All with separate ID's. They are inside vertical tabs (bootstrap). For some reason when I load the page for the first time the #1 tables <thead> <th>'s are width to 100% but the table #2 and #3 <thead> and or <td>'s are condensed and wrapped, however when I click on a sort <td> the <thead> expands to the correct width and or 100% as displayed in image #1 below
2. The second issue I have is with the sort icons. They are a little off center as displayed in image #2 below
My JS for each table is, nothing complicated.
$(document).ready(function () {
$('#dtPublic').DataTable({
"lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"order": [[ 1, "desc" ]],
"language": {
"infoEmpty": "<span class='text-danger'>No jobs found. Try another search phrase</span><br>",
"info": "Showing _START_ to _END_ of _TOTAL_ Public Jobs",
"lengthMenu": "Display _MENU_ Public Jobs"
},
"scrollY": "80vh",
"scrollCollapse": true,
});
$('.dataTables_length').addClass('bs-select');
});
Hi Piotr,
Thank you for responding so swiftly.
I have fixed both (2) issues now.
1. In regards to the table headers not automatically adjusting to 100%, when inside a tab group, with multiple tables, I used this JS code (below) NOTE: please remove , api: true if you are not using api in the table, it will cause an error onLoad if there is not data to retrieve or an empty table.
$(document).ready(function () {
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( { visible: true, api: true } ).columns.adjust();
});
$('#dtyourtableid').DataTable({
your options code goes here
});
$('.dataTables_length').addClass('bs-select');
});
2. In relation to the second issue of the sorter being out of placement, it appears that my site template is using Bootstrap 3.x and Font Awesome 4.x, so it offsets the sorter a little. I upgraded to Font Awesome 5.x, but I needed to insert a small piece of CSS (below) in the header, to adjust the sorter placement due to using Bootstrap CSS 3.x
NOTE: You must mark this CSS as !important { else: it will not work! }
table.dataTable thead.sorting:after,
table.dataTable thead.sorting_asc:after,
table.dataTable thead.sorting_asc_disabled:after,
table.dataTable thead.sorting_desc:after,
table.dataTable thead.sorting_desc_disabled:after {
right: 10px !important;
}
Hi,
About sort it's probably with data table CSS code. You can find this in datatables.css where are icons with content, probably if you will change 'right' value it will be look nice :
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
right:1em;
content:"\f0de";
font-family:'Font Awesome\ 5 Free';
font-weight:900;
font-size:1rem; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
right:0.5em;
content:"\f0dd";
font-family:'Font Awesome\ 5 Free';
font-weight:900;
right:16px;
font-size:1rem; }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: MacBook Pro
- Browser: Safari and Google Chrome
- OS: OS High Sierra 10.13.6
- Provided sample code: Yes
- Provided link: No