Open Closed

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


User avatar
0
burkay created
  • 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)
  • User Avatar
    0
    mahmut.gundogdu created

    It might be design decision. I have asked my teammate (at design team). I will answer, then he described me?

  • User Avatar
    0
    burkay created

    Please note that if that is the case, the second rule is completely useless and unnecessarily increases the bundle size. I want to believe that it is there for a reason. We already have a workaround and just wanted to bring this to your attention. Could you also tell your teammate about this? Thank you.

  • User Avatar
    0
    mahmut.gundogdu created

    yes, we talked and The design team fixed. in the next release the issue will be fixed. it was bug. due that I have refunded your credit.

  • User Avatar
    0
    burkay created

    Thank you!

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19