DataTable pagination size displayed small

DataTable pagination size displayed small

BruceeeeeeeeeeBruceeeeeeeeee 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

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943
    edited December 2022

    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

  • BruceeeeeeeeeeBruceeeeeeeeee Posts: 16Questions: 5Answers: 0

    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!

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943

    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

  • BruceeeeeeeeeeBruceeeeeeeeee Posts: 16Questions: 5Answers: 0

    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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • BruceeeeeeeeeeBruceeeeeeeeee Posts: 16Questions: 5Answers: 0
    edited December 2022

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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin
    Answer ✓

    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

  • BruceeeeeeeeeeBruceeeeeeeeee Posts: 16Questions: 5Answers: 0
    edited December 2022

    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!

Sign In or Register to comment.