I've incorporated a sidebar into one of my Views, where a table is located. To enhance the functionality of the table, I'm utilizing the datatables plugin.
The sidebar has the capability to be toggled or hidden. The issue arises when I hide the sidebar. While the table body resizes correctly, the header does not adjust accordingly. Although clicking on the header allows for manual adjustment, this is not an optimal solution. When referring to resizing, I am modifying the parent element's width using the following code snippet:
.page-wrapper.toggled .page-content .tasks-list {
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
width: calc(100% - 300px);
}
Below is a provided code snippet. For a better understanding of the problem, you would need to enter full-page mode.
I have attempted using the columns.adjust()
function as a potential solution, but it did not resolve the issue. At this point, I am running out of ideas on how to fix this.
Is there a way to resize the table header to align with the width of the tbody
? Any insights or suggestions would be greatly appreciated.