As shown in the stackblitz link, use column resizable and sorter at the same time.
What is expected?
The resizable-handle component, as it was in previous versions, should be placed at the end of the each
where the verticle divider was placed.
What is actually happening?
Now it is placed between the column title and the sorter.
Environment
Info
ng-zorro-antd
17.4.1
Browser
Chrome 127
I have already found out the reason for the issue. In previous versions (this issue could occured before v17.4.1 because the latest version I used with this function before v17.4.1 is v9.3), the rendered template was: th >> nz-table-sorters >> ((span >> {{title}} nz-resize-handle) span.class="ant-table-column-sorter"). The nz-table-sorters has "position: relative" so the resize-handle with "position: absolute" is correct in place. But now the direct parent span of the resize-handle has a class named "ant-table-column-title" with a "position: relative" in it, so the absolute postion of resize-handle is now mistaken.
I know the resizable component is still an experimental function, so to temporarily fix it in my project I set the .ant-table-column-title as position: unset. Hope it will not lead to other problems.
Reproduction link
https://stackblitz.com/edit/ng-zorro-antd-ivy-hg31fc?file=src%2Fapp%2Fapp.component.ts
Steps to reproduce
As shown in the stackblitz link, use column resizable and sorter at the same time.
What is expected?
The resizable-handle component, as it was in previous versions, should be placed at the end of the each
What is actually happening?
Now it is placed between the column title and the sorter.
I have already found out the reason for the issue. In previous versions (this issue could occured before v17.4.1 because the latest version I used with this function before v17.4.1 is v9.3), the rendered template was: th >> nz-table-sorters >> ((span >> {{title}} nz-resize-handle) span.class="ant-table-column-sorter"). The nz-table-sorters has "position: relative" so the resize-handle with "position: absolute" is correct in place. But now the direct parent span of the resize-handle has a class named "ant-table-column-title" with a "position: relative" in it, so the absolute postion of resize-handle is now mistaken.
I know the resizable component is still an experimental function, so to temporarily fix it in my project I set the .ant-table-column-title as position: unset. Hope it will not lead to other problems.
First-class support for the resizable directive in table columns would be nice.