dt-button-background appended to end of body
dt-button-background appended to end of body
InnovaMatt
Posts: 13Questions: 7Answers: 0
Hello, I have five datatables on one page, one including a button collection for data export (which functionally work if I sidestep this UI issue).
Unfortunately the div.dt-button-background is being appended to the bottom of the <body>, causing all kinds of issue with z-index. Looking at the example, that div should be a child element of the relevant div.dt-buttons, which is nested in the following DOM structure: body > #page-wrapper > #compcont > div.row > #CompBOM > section > #dT_CompBOM_wrapper > div.dt-buttons.
Any ideas what might be causing this issue?
Here's the datatable code:
`let dT_CompBOM = $('#dT_CompBOM').DataTable({
"pageLength": 5,
"autoWidth": true,
"lengthChange": false,
"searching": false,
"language": {
"emptyTable": "No components have been added for assembly" + compNo
},
dom: '<"cBOMhdg">Bfrtip',
buttons:
[{
extend: 'collection',
className: "btn btn-primary",
text: 'Export',
buttons: [
{extend: "excel",
background: false,
className: "btn",
attr: { id: "btn_cBOMex" }
},
{extend: "pdf",
background: false,
className: "btn",
attr: { id: "btn_cBOMpdf" }
},
{extend: "print",
background: false,
className: "btn",
attr: { id: "btn_cBOMprnt" }}
]
}],
"serverSide": true,
// "processing": true,
"columns": [
{"name": "CompNo", "className": "fit", "searchable": false},
{"name": "Desc", "className": "fit", "searchable": false},
{"name": "Q", "className": "fit ralgn", "searchable": false},
],
"ajax": {
"url": "/ajax/compbom.php",
"type": "POST",
"dataSrc": function (json) {
// console.dir("Data: " + json.data); // Log array to console
return json.data
},
"data": function(d) {
d.id = compID;
},
error: function(response, req, err){ console.log('CompBOM Error:' + err + " | Response: " + response.data + " | CompID:" + compID);}
},
"drawCallback": function (oSettings) {
let pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages > 1);
let pagedetails = $(this).closest('.dataTables_wrapper').find('.dataTables_info');
pagedetails.toggle(this.api().page.info().pages > 0);
}
}); // DataTable
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
Hi @InnovaMatt ,
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
same here with bootstrap3
work around by adding:
background:false,