NzSelect: The label of nz-option doesn't respect nz-select width when having a long label
Opened this issue · 0 comments
Reproduction link
https://stackblitz.com/edit/angular-ab6j9v?file=src%2Fapp%2Fapp.component.ts
Steps to reproduce
On app.component.ts, comment the attribute label with short value and uncomment the attribute label with long value
What is expected?
It was expected from the nz-select to respect its parent element width and partially show de label, ending with ellipsis (...), as the screenshot bellow:
What is actually happening?
The applications width gets bigger, the nz-select width goes beyond the limit, generating a horizontal scrollbar and showing all label value, and the nz-select components overlap each other, as the screenshot bellow:
| Environment | Info |
|---|---|
| ng-zorro-antd | 18.1.1 |
| Browser | Google Chrome 129.0.6668.89 |
If I change the css I've added, changing nz-select width from 100% to a fixed value, for example: 258px, the problem doesn't occur with the long value. But I need a solution without setting fixed width to nz-select, because I'm using flexible layout.