DataTable pagination size displayed small

Bruceeeeeeeeee

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?:

kthorngren

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

Bruceeeeeeeeee

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!

kthorngren

Step 1. Choose a styling framework

Bootstrap 5

Step 2. Select packages

Choose Bootstrap 5 if you want it bundled with everything. Don't select it if you are already loading Bootstrap 5.

Extensions

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

Bruceeeeeeeeee

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

allan

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

Bruceeeeeeeeee

@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:

1. Under "Column Visibility" button, the font-size are small and could not be changed, I tried change the font-family it worked but font-size didn't. My code are listed in livecode css part.
2. The pagination part size just too small in my page, I want the whole part of it to be expand and looks normal like live code.
3. I used "Compact: true," functions on my page, it works good on the live code but not on my webpage.
   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!

allan

1) Using this will change the font-size for the text in the drop down:

.dropdown-menu {
  font-size: 2em;
}

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

Bruceeeeeeeeee

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!