≡

Bad positioning of buttons-collection in fixed layout (Columns visibility)

Bad positioning of buttons-collection in fixed layout (Columns visibility)

Inso2008Inso2008 Posts: 7Questions: 5Answers: 0

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

  • allanallan Posts: 66,144Questions: 1Answers: 11,028 Site admin
    Answer ✓

    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

Sign In or Register to comment.