Pagination buttons out of borders after first page or with long number
Pagination buttons out of borders after first page or with long number
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:
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
EDIT: I found out that page-link adds fixed width of 36px. How can I override this style to
width:autoin the datatables options?Update 2: I found out that
dataTables.bootstrap4.jsis 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?
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