我有一个仅在Firefox中出现的问题。 我有一个引导选项卡视图-在每个选项卡中都有一个不同的数据表。
（在Chrome中）：如果我更改了标签页，并且使另一个表格可见，则一切正常https://imgur.com/O80dpkb
（在Firefox中）：如果我在没有浏览器滚动条处于活动状态的选项卡之间切换，则一切正常 但是如果我在没有滚动条处于活动状态的选项卡和滚动条处于活动状态的位置之间切换，则会发生：https://imgur.com/YL2khx1
这是我的表格代码：
<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>
脚本：
$(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,
});
每个列的选项卡都有单击功能。adjust还可以解决显示/隐藏表的某些有线行为
$('#pills-ideensammlung-tab').click(function() {
var table = $('#ticketdata-ideensammlung').DataTable();
table.columns.adjust();
});
现在仅在Firefox中出现问题，并且仅当我切换到浏览器滚动条处于活动状态的表时。
我认为某些东西总是使用CSS在浏览器中显示滚动条
overflow-y: scroll;
但是在Firefox中不起作用...
我应该怎么做才能摆脱这个问题？非常感谢您的帮助。