ngx-datatable hovered row is not highlighted due to CSS specificity problem #5367

burkay created 10 months ago

ABP Framework version: v7.2.2
UI type: Angular
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): no
Exception message and stack trace:
Steps to reproduce the issue:"

In ngx-lepton-x's ng-bundle.css, there is the following CSS rules:

.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
  background-color: var(--lpx-card-bg);
  padding: 0.875rem 1rem !important;
  vertical-align: middle;
  border-top: 1px solid var(--lpx-border-color) !important;
  color: var(--lpx-content-text);
}
...
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover {
  background-color: var(--lpx-ngx-dt-hover) !important;
}

When setting the background color of a hovered datatable row, there is a specificity war between these two. The first is always more specific and the background color of the second rule is never used. This should not be on purpose. Because if it was, the second rule would be completely useless. Also, the default behavior of ngx-datatable when hovering on rows is changed. Highlight is lost. Check and compare these examples:

https://swimlane.github.io/ngx-datatable/ https://commercial-demo.abp.io/language-management/languages

Moreover, the selected row is not highlighted when datatable's selectionType is set to single. There are two problems with this. The background-color from the first rule gets precedence (1) over the "blue background" from "ngx-datatable's material.css" (2). Expected is highlighting the selected row with proper colors of both light and dark ngx-lepton-x themes.

Among many, one possible solution is updating the second rule's selector and adding new rules for the selected row as below. For now, we added them to our custom scss. However, we would like these fixed in ABP to prevent littering that file.

.ngx-datatable.material:not(.cell-selection) .datatable-body .datatable-body-row:hover .datatable-body-cell {
  background-color: var(--lpx-ngx-dt-hover) !important;
}
.lpx-theme-dark {
  --lpx-ngx-dt-active: #2d2d2f; // TODO: check colors
  --lpx-ngx-dt-active-hover: #32323a;
}
.lpx-theme-light {
  --lpx-ngx-dt-active: #dddddd;
  --lpx-ngx-dt-active-hover: #c2c2c4;
}
.ngx-datatable.material:not(.cell-selection) .datatable-body .datatable-body-row.active .datatable-body-cell {
  background-color: var(--lpx-ngx-dt-active) !important;
}
.ngx-datatable.material:not(.cell-selection) .datatable-body .datatable-body-row.active:hover .datatable-body-cell {
  background-color: var(--lpx-ngx-dt-active-hover) !important;
}

4 Answer(s)