Width Styling & xScroll

Width Styling & xScroll

wallabe123wallabe123 Posts: 21Questions: 10Answers: 0

I am trying to add a horizontal scroll bar to my DataTable as it is too wide for the container it is in.
I have set the width to 100% and added the scrollX configuration option in. The scroll bar still isn't showing.
<table id="example-table" class="compact hover" width="100%">
$('#example-table').DataTable({ dom: 'frti', scrollY: "500px", scrollX:true, pageLength :-1, })

When I look in the developer tools of the browser it shows that the 'width = 100%' has been ignored.

Could this be why the horizontal scroll bar isn't working, and if so how do I make it recognize the width.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 16,828Questions: 25Answers: 3,989
    Answer ✓

    Could this be why the horizontal scroll bar isn't working, and if so how do I make it recognize the width.

    Looking at this example I see the same thing as your screenshot. I would suspect that this is expected with scrolling enabled.

    What happens with the table display? Does it extend past the container width?

    We will need to see the issue to help debug styling issues. Please post a link to your page or a test case replicating the issue so we can take a look.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • wallabe123wallabe123 Posts: 21Questions: 10Answers: 0

    @kthorngren thanks for your reply, I've since realized it was inheriting a hidden scroll-x attribute from a global class. Here's hoping the brain switches on for the rest of the week! Thanks again.

  • allanallan Posts: 56,888Questions: 1Answers: 9,042 Site admin
    Answer ✓

    Without a test case, it is hard to say for sure, but my guess is that the browser is able to collapse the table down to fit in the space available and therefore does so (it will always try to make a table fit the space available).

    Add white-space: nowrap; to your styles for the table cells to see if that is the issue (if you are using our CSS then you can add a nowrap class to the table to do that).

    If that doesn't resolve it, please link to a test case showing the issue.

    Allan

  • allanallan Posts: 56,888Questions: 1Answers: 9,042 Site admin

    Hah - beaten to it by Kevin again! :)

Sign In or Register to comment.