Firefox Scrollbar interaction
Firefox Scrollbar interaction
Timebreaker900
Posts: 3Questions: 1Answers: 0
I have a problem with the datatable and Firefox and it only appears in Firefox.
I have a bootstrap tagview and inside every tag is another datatable.
The problem is now a wierd interaction with the Browser Scrollbar.
Some tabs have a Scrollbar some do not.
If I change a tab to which has a Browser Scrollbar everything is fine but If I change it back to another tab which has no Scrollbar it looks like this: https://imgur.com/YL2khx1
But it should look like this: https://imgur.com/O80dpkb
So there is a problem with tables and the Firefox Browser Scrollbar..
This is my tablecode:
<table id="ticketdata-erstelltetickets" class="table table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th width="50px"><a class="btn btn-primary btn-sm pt-2 pb-2" id="hidethead"
target="objektnr"><i class="mdi mdi-filter m-2"></i></a></th>
<th data-priority="2" width="100px">Ticket Nr</th>
<th>Titel</th>
<th class="type">Typ</th>
<th>Für</th>
<th>Priorität</th>
<th>Bereich</th>
<th>Alter</th>
<th>Status</th>
<th>Fortschritt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Script:
$(document).ready(function () {
var data = {{ erstellte_tickets|raw }};
var table = $('#ticketdata-erstelltetickets').DataTable({
data: data,
responsive: 'true',
columns: [
{
data: null,
sortable: false,
render: function (data, type, full, meta) { // /'+full.id+'/' + full.creator + '
return '<a class="btn btn-primary btn-sm btn-rounded pt-2 pb-2" href="{{ app.request.getBaseURL() }}/ticketdetail/' + full.id + '/"><i class="mdi mdi-open-in-new m-2"></i></a>'
},
width: '32px'
},
{ data: "ticketid" },
{ data: "title" },
{
data: "type",
name: "type",
className: "type",
render: {
display: function (data, type, full) {
if (data == "error") {
return '<span class="mdi mdi-close-octagon mdi-24px" style="color:red"></span>';
} else if (data == "request") {
return '<span class="mdi mdi-file-check mdi-24px" style="color:rgb(255, 180, 80)"></span>';
} else {
return '<span class="mdi mdi-lightbulb-on mdi-24px" style="color:#6e6ed0"></span>';
}
}
},
width: '40px'
},
{
data: "assigned_to",
name: "assigned_to",
className: "assigned_to",
},
{
data: "priority",
name: "priority",
className: "priority",
render: {
display: function (data, type, full) {
if (data == "hoch") {
return '<span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span>';
} else if(data == "mittel") {
return '<span class="mdi mdi-comment-alert mdi-24px" style="color:orange"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:orange"></span>';
} else {
return '<span class="mdi mdi-comment-alert mdi-24px" style="color:green"></span>';
}
}
},
width: '80px'
},
{
data: "department",
name: "department",
className: "department",
render: {
display: function (data, type, full) {
var output = 'kein Bereichsname';
if(data == null || data == "") {
output = 'kein Bereichsname';
return output;
} else {
for(i = 0; i <= fid.length; i++){
if (data == fid[i]) {
output = fidname[i];
return output;
}
}
}
}
}
},
{
data: "created_on",
render: function (d) {
var time = moment(d);
var eventdate = moment(d);
var todaydate = moment();
var eventtime = moment(time);
var todaytime = moment();
if(todaydate.diff(eventdate, 'days') == "0"){
if(todaytime.diff(eventtime, 'hours') == "0") {
return todaytime.diff(eventtime, 'minutes') + " Min";
} else {
const min = todaytime.diff(eventtime, 'minutes') - (todaytime.diff(eventtime, 'hours') * 60);
return todaytime.diff(eventtime, 'hours') + " Std " + min + " Min";
}
} else if (todaydate.diff(eventdate, 'days') == "1") {
return todaydate.diff(eventdate, 'days') + " Tag";
} else {
return todaydate.diff(eventdate, 'days') + " Tage";
}
},
width: '100px',
},
{
data: "status",
name: "status",
width: '105px',
},
{
data: "fortschritt",
name: "fortschritt",
width: '90px',
}
],
order: [[1, "asc"]],
language: {
"url": "/js/German.json"
},
"processing": true,
autoWidth: false,
//width: '100%',
orderCellsTop: true,
fixedHeader: true,
});
I also have a click function for every tab with the columns.adjust which also fixes some wired behavior with show/hide tables
$('#pills-ideensammlung-tab').click(function() {
var table = $('#ticketdata-ideensammlung').DataTable();
table.columns.adjust();
});
What should I do to get rid of this problem? Thanks in advance!
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Thx for your answer but I think it's pretty hard to do that in jsfiddle or something else but I can't imaging it will work because It has something to do if an hidden table gets visible where a scrollbar for the page is needed and If I change back to a table where no scrollbar is needed the wierd alignments happen. But I definitely will try it.
Ok, as I said it do not appear in jsfiddle https://jsfiddle.net/Timebreaker900/r30jzgd2/22/
But I fixed it with a permanent scrollbar in both browsers. It seems that datatables has a problem with a combination of show/hide tables and activating browser scrollbars.
Chrome works without permanent scrollbar and wierdly firefox do not work without a permanent scrollbar. I don't know where this problem come from.. It could be a problem of Firefox, a problem of Datatables working with Firefox or it could be bootstrap working with firefox I don't know it.
My big question mark is... why is chrome fine and Firefox not... I don't get that..?!
But thanks anyways!
Have a nice day, and PS: Datatables is awesome keep it up
Peace
Try:
I'd be willing to best it is just to do with how the two browsers are handling their painting queue. Chrome has always seemed a bit faster in DOM interaction performance to me, so it might be that it has placed the table into the DOM and made it visible by the time it gets to the adjust function, while Firefox has not (optimising in a different way).
Either way, the key is to make sure you call
columns.adjust()after the table is in the visible document.Allan