We are using the Lepton Theme (non-X) and after upgrading to ABP 9.3.2 (from 9.2.x) we face some styling issues. We think the issue might be related to the order in which our styles are loaded.
This seems similar to https://abp.io/support/questions/9821/Angular-Style-Declaration-Order-is-ignored-when-injecting-styles-into-the-DOM-since-upgrade-to-ABP-931, but this was for LeptonX.
Our app in production (9.2.x):
<link rel="stylesheet" href="lepton4-X4OK76EB.css">
<link rel="stylesheet" href="ngx-datatable-index-ALC7J2LN.css">
<link rel="stylesheet" href="ngx-datatable-icons-YZZVGCGU.css">
<link rel="stylesheet" href="ngx-datatable-material-QROZ42NV.css">
<link rel="stylesheet" href="fontawesome-all.min-V43YH5Q7.css">
<link rel="stylesheet" href="fontawesome-v4-shims.min-5GHJGPBV.css">
<link rel="stylesheet" href="styles-3O3IHLFY.css">
Our development app (same app, but upgraded to 9.3.2):
<link rel="stylesheet" href="lepton4.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="ngx-datatable-index.css">
<link rel="stylesheet" href="ngx-datatable-icons.css">
<link rel="stylesheet" href="ngx-datatable-material.css">
<link rel="stylesheet" href="fontawesome-all.min.css">
<link rel="stylesheet" href="fontawesome-v4-shims.min.css">
We are facing issues with the ngx-datatable not being styled correctly.
Here's our app in production, styled to full page height:
Here's the App in development, not styled to full height:
It also exhibits other style issues, but only in the ngx-datatable:
Which seems to suggest to us that the loading of the styles is the issue, as we correctly override things in the lepton4.css from the base theme, but certain ngx-datatable stuff does not get overridden correctly, as the style.css is loaded before the ngx-datatable.css stuff.
3 Answer(s)
-
0
The style loading order issue you are experiencing after upgrading to ABP 9.3.2 is a known problem that can affect how custom styles and third-party styles (like ngx-datatable) are applied, especially with the Lepton (non-X) theme.
In ABP Angular projects, the order of styles in the generated HTML is determined by the order in the
angular.jsonfile's"styles"array. Ifstyles.cssis loaded before third-party styles (like ngx-datatable), your overrides may not work as expected.To resolve this, ensure that your
angular.jsonlists the styles in the correct order. For your scenario, you should place yourstyles.cssafter all third-party and theme styles, for example:
"styles": [ "src/styles/lepton4.css", "src/styles/ngx-datatable-index.css", "src/styles/ngx-datatable-icons.css", "src/styles/ngx-datatable-material.css", "src/styles/fontawesome-all.min.css", "src/styles/fontawesome-v4-shims.min.css", "src/styles/styles.css" ]This ensures that your custom styles in
styles.cssare loaded last and can override previous styles.After making this change, rebuild your Angular project to ensure the new order is reflected in the output HTML.
If you are using ABP's dynamic style injection or any runtime style loader, make sure it does not alter the intended order.
For more details and a similar issue (with LeptonX, but the principle applies), see:
This approach should resolve the style override issues with ngx-datatable and other components after your ABP upgrade.
Sources:
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
Sorry bot, but I need a human.
Also, styles.scss is the last entry in the styles array.
-
0
Hello,
We will be releasing some fixes for the ngx-datatable lbrary related problems in the upcoming patch release. If you think that your overrides are different, you can send a minimal producible example to this e-mail address: sumeyye.kurtulus@volosoft.com and I would be able to assist yo further.
Thank you for your cooperation.
