NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.8k stars 3.85k forks source link

nz-modal with nz-table using fixed columns, the fixed columns do not work #8598

Open xuxzh opened 1 week ago

xuxzh commented 1 week ago

Reproduction link

https://stackblitz.com/edit/angular-grxzhn?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

  1. click 'test' button
  2. fixed columns in table are abnormal

What is expected?

should have two normal fixed columns

What is actually happening?

abnormal fixed columns

Environment Info
ng-zorro-antd 18.0.0
Browser edge 126.0.2592.68

Screenshot:

image

ParsaArvanehPA commented 1 week ago

Hello @xuxzh,

The behavior you've observed with the fixed columns in your table is due to the way the left or right positions of each cell are determined by the widths of the cells that come before them. When your table is placed within a modal that uses an animation upon opening, it can cause the widths of the preceding cells to be calculated incorrectly.

To mitigate this issue promptly, you might want to consider the following solutions:

  1. You could disable the animation of the modal, which may help in preventing the width miscalculation. This can be done by applying the [nzNoAnimation]="true" attribute to your nz-modal.
  2. Another approach is to delay the loading of your modal's content. This can be implemented with the following code: @defer(on timer(240ms)) {}

These suggestions are intended as immediate remedies, and a more in-depth examination is recommended for a permanent resolution.