Scroll Y visual issues
Scroll Y visual issues
TomCorr
Posts: 24Questions: 3Answers: 0
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???
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
It shrinks in width and not in height, it does not use 100% div width
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
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).
=======================================================
I will try a give you a test case anyway,
Thanks in advance.
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
http://live.datatables.net/luyuqune/2/edit?html,css,js,console,output
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:
to your CSS to address it.
http://live.datatables.net/luyuqune/7/edit
Allan
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.
Metro helped me with the other part!!
Add:
.dataTables_wrapper {
display: block!important;
}
Thank you ver much Allan and kthorngren