CSS Display Issue/Conflict in Pagination

CSS Display Issue/Conflict in Pagination

kraftomatickraftomatic Posts: 78Questions: 13Answers: 0

Hi All,

I'm trying to break down where the CSS is breaking the styling of the pagination controls, shown here:

http://live.datatables.net/yohuluco/10/edit

It lies within this CSS file:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />

And most likely here:
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #111;
background-color: #585858;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
/* Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
/
Chrome10+,Safari5.1+ /
background: -moz-linear-gradient(top, #585858 0%, #111 100%);
/
FF3.6+ /
background: -ms-linear-gradient(top, #585858 0%, #111 100%);
/
IE10+ /
background: -o-linear-gradient(top, #585858 0%, #111 100%);
/
Opera 11.10+ /
background: linear-gradient(to bottom, #585858 0%, #111 100%);
/
W3C */
}

Still, I'm not sure how to fix this properly. I can't remove the CSS and my attempts to overwrite/prioritize it with a fix within my page, have proven unsuccessful.

I realize this is looking for a needle in a haystack, but I have to think there are examples in use where these same CSS files would be used together. Is there anything glaring I might be missing?

Thank You,

Ed

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited December 2020 Answer ✓

    You are using Bootstrap but you haven't loaded the Datatables Bootstrap integration files as described in the Bootstrap 3 Styling doc. Here is an example.

    I commented out your files and used the Download Builder to get the proper files. See this updated example:
    http://live.datatables.net/yohuluco/11/edit

    Kevin

  • kraftomatickraftomatic Posts: 78Questions: 13Answers: 0
    edited December 2020

    Thanks Kevin, that did the trick. I was surprised to see the gray icons for sorting on the columns are gray for Bootstrap, and not the blue arrows, but oh well. No biggie.

    Ed

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Yes we use the icons that are built into Bootstrap to make the integration more complete. If you want to colour them, you can do so with CSS.

    Allan

This discussion has been closed.