Why scrollX cause alignment problems and is before the footer ?

MelodyNelson

Link to test case: https://live.datatables.net/xomujosa/12
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I was trying horizontal scrolling on this table
https://live.datatables.net/xomujosa/12

And the result is a little « ugly » with the scrollbar or without it.

Should I change something on the table ?

Thanks

allan

If you don't want the scrollbar to be between the footer and the header, make the table container overflow: auto and remove scrollX - in this case:

div.is-flex.is-justify-content-space-between.is-align-items-center.column.is-full.dt-layout-full.column.is-full {
  overflow: auto;
}

https://live.datatables.net/xomujosa/13/edit

The reason that it is in between the body and footer by default is for when scrollY is activated. Then, typically, one will want the header and footer to stay in place while the body scrolls.

I might look at putting in a different way of doing the scrolling when only scrollX is activated in future.

Allan

MelodyNelson

Excellent, thank you Allan.

I tried to add a div before the table with the overflow:auto + removing -scrollX but the scrollbar was always showing.
I didn't thought of targeting the div you mentionned.