Scroll Y visual issues

TomCorr

I am activating ScollY to 50vh and ScrollCollapse: true, and the whole table floats to the left, leaving buttons and search bar in their same place. Is this a bug or am i doing something wrong???

TomCorr

It shrinks in width and not in height, it does not use 100% div width

TomCorr

kthorngren

This example seems to work:
https://datatables.net/examples/basic_init/scroll_y_dynamic.html

Seems like a CSS issue, maybe? In order to help we will need to see the issue. please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

TomCorr

Hi kthorngren,

Thank you for the quick response, i have been doing some debugging, and it is in fact a CSS problem. First i received this warning: https://datatables.net/manual/tech-notes/6.

Then i checked all my css files, and if i remove my Main css: Metro (Metro UI 4) files, datatables work perfectly. I'd imagine there is conflict between them or wrong placement, which i would hope there is a solution for because all my system is made with metro.

I'll attach the css warnings i get in developer tools (F12).

=======================================================

TomCorr

I will try a give you a test case anyway,

Thanks in advance.

TomCorr

This is a Metro - Datatables problem, if you remove metro css, datatables work perfectly. Is there a workaround?

http://live.datatables.net/luyuqune/2/edit?html,css,js,console,output

TomCorr

http://live.datatables.net/luyuqune/2/edit?html,css,js,console,output

allan

Interesting one. The issue is caused by Metro making the DataTables container a flex box. That's good, but it looks like the scrolling aspect has been overlooked.

Add:

div.dataTables_scroll {
  flex-grow: 2;
}

to your CSS to address it.

http://live.datatables.net/luyuqune/7/edit

Allan

TomCorr

Hi Allan,

Thank you for the workaround!! that did help the table wrapper, but the search, entry and info controls are still misaligned, i expanded the test case you sent.

TomCorr

Metro helped me with the other part!!

Add:

.dataTables_wrapper {
display: block!important;
}

Thank you ver much Allan and kthorngren