Problem with Bottom border of Last line in using scrollX. Bad position if few results
Problem with Bottom border of Last line in using scrollX. Bad position if few results
Nounours13
Posts: 8Questions: 2Answers: 0
Hello,
First of all, thank you for all the work you are doing to update the new version 2.1 of datatables.
I noticed a problem with the last line if you use the scrollX option with or without bootstrap 4.
The bottom border of the last line is not visible if the lines to fill the height defined in the scrollX option are not sufficient
If you do not use bootstrap, it is the same problem if you activate the borders.
This is an example and a picture with bootstrap :
https://live.datatables.net/larucuha/3/edit?html,js,output
This is an example and a picture without bootstrap :
https://live.datatables.net/soxizesa/1/edit?html,js,output
Thanks for your help.
This question has an accepted answers - jump to answer
Answers
Sorry le last image don't work.
This is the image
Add
scrollCollapseto your table options: https://live.datatables.net/larucuha/4/edit .Allan
Hi Allan,
Yes indeed I had seen this option and with this option it works correctly. But in version 1.1x of datatables, it seems to me that this border bug did not exist.
In addition, it was very practical at the display level because we can define a fixed zone for the table.
Do you think you will make a correction or not of this problem so that I know if I need to modify my display code.
Thanks again for taking the time to answer me.
Fair point! v2 changed how the table borders are operated to be more reliable (except in this case apparently!).
The issue is that the border is applied to the table cells, which doesn't expand down the non-collapsed container. The container does have a bottom border, which is the line at the bottom, but if we simply add left and right borders:
then next to the table we get double width border (i.e. the container + the border on the table cells).
It is possible to handle this with an
outlinewhich is offset by -1px:https://live.datatables.net/larucuha/3/edit
I'm not sure I'll include that in the DataTables distribution though. I might need to revisit the border decision, although that has a significant knock on impact on other things such as column widths and plugins.
Allan
Hi Allan,
Thanks a lot for the resolution of the table border with the modification of the css:
div.dt-container div.dt-scroll-body {
border-bottom: none;
outline: 1px solid #dee2e6;
outline-offset: -1px;
}
And I think that in my case this will allow me to solve the display problem.
On the other hand, there is still a problem with the last line of the table whose bottom border are still missing.
This is the picture and the link to livedatatables
https://live.datatables.net/larucuha/5/edit
Did you have a soluce for this ?
Really thanks again for your help.
This little bit of CSS will do:
https://live.datatables.net/larucuha/6/edit
Allan
Thanks allan and Have a good day.