Datatable styling loss with mdb.dark.min.css


Topic: Datatable styling loss with mdb.dark.min.css

bpeterson pro premium priority asked 2 years ago

Expected behavior stripe rows and hover work with mdb.dark.min.css as they do with mdb.min.css on:

<div id="datatable" data-mdb-loading="true" data-mdb-dark="true" data-mdb-color="blue-grey-dark" data-mdb-striped="true" data-mdb-hover="true" data-mdb-sm="true" data-mdb-sm="true" data-mdb-pagination="false"></div>

Actual behavior stripe rows and hover DO NOT work with mdb.dark.min.css Resources (screenshots, code snippets etc.)

this is with mdb.min.css:

[this is with mdb.dark.min.css:


Grzegorz Bujański staff answered 2 years ago

It's a bug on our side. We will fix it as soon as possible. At the moment, as a workaround, you can add this styles:

  .datatable.datatable-hover tbody tr:hover td {
      background-color: var(--datatable-hover-bg)!important;
  }

bpeterson pro premium priority commented 2 years ago

that works, and for striping ??? [every other row]?


Grzegorz Bujański staff commented 2 years ago

Try this:

.datatable.datatable-striped tbody tr:nth-of-type(odd) td {
  background-color: var(--datatable-accent-bg);
  color: var(--datatable-striped-color);
}

bpeterson pro premium priority commented 2 years ago

i opened a separate question involving this workaraound: https://mdbootstrap.com/support/standard/datatable-style-bug-with-dark-theme/


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No