Vertical Scroll Bar makes alignment wrong

Vertical Scroll Bar makes alignment wrong

polachanpolachan Posts: 101Questions: 50Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • polachanpolachan Posts: 101Questions: 50Answers: 0
    edited June 2021

    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/

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • polachanpolachan Posts: 101Questions: 50Answers: 0

    https://jsfiddle.net/cb91vpfn/

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

  • polachanpolachan Posts: 101Questions: 50Answers: 0

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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • polachanpolachan Posts: 101Questions: 50Answers: 0

    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
    });

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited June 2021

    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

  • polachanpolachan Posts: 101Questions: 50Answers: 0

    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 ?

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • polachanpolachan Posts: 101Questions: 50Answers: 0

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

Sign In or Register to comment.