Vertical Scroll Bar makes alignment wrong

polachan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

Looks like the vertical scrollbar works properly in this example:
https://datatables.net/examples/basic_init/scroll_y.html

Make sure you have the correct JS and CSS for the styling framework you are using. Use the Download Builder. If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

polachan

I have given my code here with . When I apply scrollY: to the ddata table, all alignment goes wrong. Please find my example attached herewith. Please can you help how to give ScrollY and Scroll X to the script without affecting the alignment with heading and its content
https://jsfiddle.net/cmnkpuza/

kthorngren

Your example is not running correctly. The browser's console show a syntax error with this line in the Javascript section:

<script type="text/javascript">

Remove that line.

You have loaded any of the Datatables JS or CSS files. Please load these files and provide the steps for us to see the issue with scrollY.

Kevin

polachan

https://jsfiddle.net/cb91vpfn/

I have removed that error in above link. Please can you help me how to scroll vertically without alignment problem

polachan

When I apply scrollY option , the heading and the corresponding data would be placed in wrong position

allan

I'm seeing this in your example:

Is that what I should expect?

border-spacing: 10px 0;

That is really going to mess with things. You'll need to set it to be 0.

Allan

polachan

I did give the code as follows. Still the alignment not correct. Any help, would be very kind .
table {
border-spacing: 0px;
/border-top: 1px solid black;/
}

var table = $('#attendance').DataTable({
scrollY: "400px",
scrollX: true,
paging: false
});

kthorngren

Can you update your test case to show the issue? For example you need to initialize Datatables which will require you to load the proper JS and CSS files.

Or post a link to your page so we can take a look to help debug.

Kevin

polachan

Thanks Kevin, I will create the separate source with the same code and will give link in GitHub , I assume , that would help you more clear to see the problem in my code. Is that Okay ?

kthorngren

We will need to see the code running to help debug. Please see this link:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

polachan

Kevin
No Problem I have to create small application in jsfiddle and I hope that will help you to see the problem.
Thanks Kevin