Currently, I am actively involved in developing a Sharepoint web part that leverages JQuery datatables to format specific reporting results. Here is an overview of how the report appears:
https://i.sstatic.net/jXaiN.png
An issue has arisen concerning the 'Export to Excel' button. This button is automatically generated by datatables. To address this, I have established a class for the button with the following code:
.FSexportButton
{
position: absolute;
right: -7px;
bottom: -20px;
}
This class is applied during the table initialization process. The button maintains the correct positioning (as depicted in the image) when the report contains data. However, if there is no data present, the button's position goes awry and shifts. The CSS provided by jQuery takes precedence over the defined class CSS, resulting in the button's position changing to 'relative'. I am currently exploring ways to ensure the button remains in its original position shown in the picture, regardless of the div size.
In an effort to tackle this challenge, I introduced another class:
a.dt-button.advisorsExportButton {
position: absolute;
right: -7px;
bottom: -175px;
}
As a result, the button now retains an absolute position; however, this adjustment leads to the original div, previously set as relative, being overridden.