DataTable pagination size displayed small
DataTable pagination size displayed small
Bruceeeeeeeeee
Posts: 16Questions: 5Answers: 0
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Hello, I got a problem when I using and data table with bootstrap5 styling, the pagination button looks so small than others, I tried a lot of override and nothing happened, can anyone help me with this please?:
This question has an accepted answers - jump to answer
Answers
Make sure you have all the Datatables Bootstrap 5 style integration files. Use the Download Builder for this. See this example for what the table should look like.
If you still need help then please post 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
Hi @kthorngren , thanks for your reply, I want to check that for the download builder, my choice are: 1. Bootstrap5 for styling framework 2. Bootstrap5 & DataTables for packages 3. Everything for Extensions, is that correct? Thank you!
Bootstrap 5
Choose Bootstrap 5 if you want it bundled with everything. Don't select it if you are already loading Bootstrap 5.
I would choose only the extensions you are using. No need to load extra code on the page you don't need. You can always come back to add them.
Kevin
Thanks again @kthorngren, now I'm downloaded the right build for my application, but the pagination button looks still small than other components in my page:
I'm trying to use:
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
font-size: 20px;
height: 20px;
}
and
.dataTables_wrapper .dt-buttons {
float: none;
text-align: center;
font-size: 20px !important;
}
But nothing happened, did I use the correct style functions? Thanks
Looks about right. Perhaps you can give us a link to your page so we can take a look at what is going wrong?
Allan
@Hi Allan,
Thanks for your advice, I attached my live code of my page below:
live.datatables.net/nadanoce/1/edit
Since I'm using MVC for the application and @ViewBag for the table database, so I just keep the example case for the table content.
For the live code, I used my downloaded html & css link, every thing works fine on the live code page except my application local host, there are mainly 2 problems:
Just for more details: I also have layout.html page used for the head and foot for website, is that some reason caused those problems?
Could you please give me some idea about those questions? Thank you so much!
1) Using this will change the font-size for the text in the drop down:
2) It actually looks correct to me on the page you linked to:
3) I'd need to be able to see it not working to understand why it isn't working. Your example seems to work okay, so I can't really debug that
Allan
Thanks @allan , the dropdown-menu works fine now, very appreciate for your help!
May I ask could you share some CSS syntax about change style of pagination please? I could not change the style on live code by using below code:
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
width: 200px;
height: 200px;
Thank you!