79815550

Date: 2025-11-10 11:52:09
Score: 0.5
Natty:
Report link

The correct answer is to use [nzDropdownMatchSelectWidth] as per the documentation. Check it out here:

https://ng.ant.design/components/select/en

My code now looks like this:

        <nz-form-item>
          <nz-form-label [nzSpan]="6">{{ 'common.client' | translate }}</nz-form-label>
          <nz-form-control [nzSpan]="18">
            <nz-select formControlName="clientId" nzPlaceHolder="{{ 'common.show-everything' | translate }}" nzShowSearch nzAllowClear [nzDropdownMatchSelectWidth]="false">
              @for(client of this.entityListsService.clients(); track client.value ) {
                <nz-option [nzValue]="client.value" [nzLabel]="client.text ?? ''"></nz-option>
              }
            </nz-select>
          </nz-form-control>
        </nz-form-item>

This changes my dropdown from this (dependent on the title attribute you see to the right):

enter image description here

To this (width is now changed to whatever the widest option is):

enter image description here

Reasons:
  • Blacklisted phrase (0.5): Check it out
  • Probably link only (1):
  • Long answer (-0.5):
  • Has code block (-0.5):
Posted by: Jon Koeter