Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NzSelect: The label of nz-option doesn't respect nz-select width when having a long label #8830

Open
mikaelboffsysmo opened this issue Oct 9, 2024 · 0 comments
Assignees

Comments

@mikaelboffsysmo
Copy link

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:
image

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:
image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants