Pagination buttons out of borders after first page or with long number

Pagination buttons out of borders after first page or with long number

loopersloopers Posts: 17Questions: 7Answers: 0
edited February 17 in General

I have issues with pagination:
1) The "Previous" button shrinks and the text remains large so it's out of the border
2) If the page number is too large, it's hidden inside the button and not seen

This is how it looks: https://imgur.com/a/WWGoMvG

I noticed that the buttons look good when I add the disabled class on them, for example:

<li class="paginate_button page-item previous disabled" id="my_table_previous">
    <a href="#" aria-controls="my_table" data-dt-idx="0" tabindex="0" class="page-link">Previous</a>
</li>
<li class="paginate_button page-item disabled">
    <a href="#" aria-controls="my_table" data-dt-idx="7" tabindex="0" class="page-link">117660</a>
</li>

Then it looks better:

https://imgur.com/a/dO4R9iH

What could cause this issue?

**The disabled class is added automatically to the Previous and Next buttons depending on the current page, so I just played with them and found out some styling they have can fix it, but didn't find which and how to fix it in the table definition

Answers

  • loopersloopers Posts: 17Questions: 7Answers: 0
    edited February 17

    EDIT: I found out that page-link adds fixed width of 36px. How can I override this style to width:auto in the datatables options?

    Update 2: I found out that dataTables.bootstrap4.js is what breaks the pagination buttons.
    On one hand it makes the button look better, but it breaks it. Maybe it's conflicting with other JS files. What scripts do I need for a table? Looks like the previous developers just put everything the could find, but I don't want to mess stuff up:

    jquery.dataTables.min.js
    dataTables.dataTables.min.js
    dataTables.responsive.min.js
    jquery.dataTables.js
    dataTables.bootstrap4.js
    dataTables.buttons.min.js
    buttons.bootstrap4.min.js
    dataTables.responsive.min.js
    responsive.bootstrap4.min.js

    Isn't it too much? :dizzy:

  • colincolin Posts: 14,448Questions: 1Answers: 2,462

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

Sign In or Register to comment.