Bad positioning of buttons-collection in fixed layout (Columns visibility)
Bad positioning of buttons-collection in fixed layout (Columns visibility)
Link to test case:
https://datatables.net/examples/buttons/column_visibility/layout.html -- you need to shrink the window to a small height, then clicking "Columns (fixed layout)" opens the popover element not centered -- it is lower than at center. The error is greater when the buttons-collection renders taller (has more lines) or is relatively taller (window is downsized).
Description of problem:
When opening Columns visibility, a popover with the collection of buttons is opened. There are two positioning variants: 'absolute' (is not affected) and else/fixed (is affected). The positioning of the else/fixed computes its vertical position and sets 'margin-top'. This positioning seems to have been broken when migrating the library away from jQuery dependency.
Blame tracking:
repo: Buttons, versions (tentatively): 4.0.0-4.1.2, commit: c0c3e0585462571270dfb544a52898f14f73d397
file: js/Buttons.ts
function: popover(), the if-else branch under comment "Align the popover relative to the DataTables container"
lines (of that commit) for context: 675-689, error line: 689
error: when appending 'px' to values, you might have inadverently stripped the "multiply by -1"
Workaround:
We're currently using a CSS-fix (displays correctly within 2px-error for smaller-than-window popovers):
div.dt-button-collection.fixed {
margin-top: 0 !important;
transform: translateY(-50%);
}
I searched the discussions here but didn't find this issue mentioned, so this is hopefully the first.
Hope this is as easy a fix as it seems. Thanks for the great library..
This question has an accepted answers - jump to answer
Answers
Good catch! A single character fix which is now in and will be in the nightly build shortly, and the next release after that.
Regards,
Allan