After upgrading our Angular front-end to Angular 20 (using ABP Commercial 9.3.1), we started seeing a layout issue with abp-extensible-table. In Firefox everything renders correctly. In Chromium browsers (Chrome/Edge), the table headers do not align/adjust on initial render. They only fix themselves after interacting with the table (e.g. focusing, resizing, or triggering a redraw).
Steps to Reproduce Create a clean Angular 20 + ABP project. Add a simple abp-extensible-table with a few columns. Run in Chrome/Edge.
Observed Behavior On first load the header widths are misaligned or do not adjust to fit. After clicking inside the table or triggering focus, headers snap into place.
Expected Behavior Table headers and body columns should align correctly on first render in Chromium, same as in Firefox.
Current Workaround We currently use our own extended implementation of abp-extensible-table in some modules. As a temporary fix, we replaced it and forced ngx-datatable-column.canAutoResize = false. Our implementation is very similar to the ABP one, with just a few additions.
7 Answer(s)
-
0
This is a known issue with abp-extensible-table in Chromium-based browsers after upgrading to Angular 20 and ABP 9.3.1. The table header misalignment on initial render is caused by how ngx-datatable (used internally by abp-extensible-table) calculates column widths, which can be affected by rendering timing differences in Chromium browsers.
Your workaround (setting canAutoResize = false on ngx-datatable-column) is a valid temporary solution, as it prevents automatic width recalculation that can cause the misalignment.
There is an open issue tracking a similar problem with extensible forms and typeahead, which may be related to rendering/patching timing in Angular 16+ and Chromium:
- https://github.com/abpframework/abp/issues/22375
- https://abp.io/support/questions/8965
For a more robust workaround until an official fix is released, you can:
- Set canAutoResize = false on all columns in your abp-extensible-table.
- Alternatively, after the table is rendered, programmatically trigger a table resize or redraw (e.g., by calling the ngx-datatable's recalculate() method or dispatching a window resize event).
The ABP team is aware of similar rendering issues and is working on improvements for extensible components in upcoming releases. You can follow the progress on the GitHub issue above.
Sources:
- https://github.com/abpframework/abp/issues/22375
- https://abp.io/support/questions/8965
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
The issues provided from @AI-Bot are not related to the current ticket.
-
0
@Sumeyye will check your issue
-
0
Hello,
I cannot produce the same problem on my end. Could you please specify the browser version you use? If you think that this does not relate to your problem, you could send a minimal reproducible example to this e-mail address sumeyye.kurtulus@volosoft.com so that I could assist you further.
Thank you for your cooperation.
-
0
Hello again,
Could you clarify that the problem you have been facing is similar to this?
If this is the case, we have also detected the same issue and will be fixing within the next patch release. You can follow the status here https://github.com/abpframework/abp/releases
-
0
Yes. It is. I've solved it on my current implementation using datatable.recalculateColumns(). Is there a issue open on github?
-
0
Yes, it will be fixed in an internal issue.
