Skip to content

Fix long option not truncated issue in dropdown #19584

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.

Sign up for GitHub

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

Open
ayush1298 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix long option not truncated issue in dropdown #19584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6217874
Fix long option not truncated issue in dropdown
ayush1298 May 19, 2026
2c6f834
changes from copilot review
ayush1298 May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/primeng/src/api/overlayoptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,10 @@ export interface OverlayOptions {
* The motion options for the overlay.
*/
motionOptions?: MotionOptions;
/**
* Indicates whether the overlay should have a max-width based on the target element.
*/
autoMaxWidth?: boolean;
/**
* Indicates whether the overlay should be hidden when the escape key is pressed.
*/
Expand Down
9 changes: 7 additions & 2 deletions packages/primeng/src/multiselect/multiselect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const MULTISELECT_VALUE_ACCESSOR: any = {
</ng-template>
</ng-container>
</p-checkbox>
<span *ngIf="!template">{{ label ?? 'empty' }}</span>
<span *ngIf="!template" [class]="cx('optionLabel')" [pBind]="getPTOptions('optionLabel')">{{ label ?? 'empty' }}</span>
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
`,
encapsulation: ViewEncapsulation.None,
Expand Down Expand Up @@ -293,7 +293,7 @@ export class MultiSelectItem extends BaseComponent {
#overlay
[hostAttrSelector]="$attrSelector"
[(visible)]="overlayVisible"
[options]="overlayOptions"
[options]="{ ...overlayOptions, autoMaxWidth: autoWidth }"
[target]="'@parent'"
[appendTo]="$appendTo()"
[unstyled]="unstyled()"
Expand Down Expand Up @@ -740,6 +740,11 @@ export class MultiSelect extends BaseEditableHolder<MultiSelectPassThrough> {
* @group Props
*/
@Input({ transform: booleanAttribute }) autofocusFilter: boolean = false;
/**
* Whether the width of the overlay mirrors the width of the component.
* @group Props
*/
@Input({ transform: booleanAttribute }) autoWidth: boolean = true;
/**
* Defines how the selected items are displayed.
* @group Props
Expand Down
17 changes: 17 additions & 0 deletions packages/primeng/src/multiselect/style/multiselectstyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@ const style = /*css*/ `
p-multiselect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder {
Comment thread
ayush1298 marked this conversation as resolved.
color: dt('multiselect.invalid.placeholder.color');
}

.p-multiselect-option-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.p-multiselect-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;

const inlineStyles = {
Expand Down Expand Up @@ -63,6 +75,7 @@ const classes = {
'p-disabled': instance.disabled,
'p-focus': instance.focused
}),
optionLabel: 'p-multiselect-option-label',
emptyMessage: 'p-multiselect-empty-message',
clearIcon: 'p-multiselect-clear-icon'
};
Expand Down Expand Up @@ -156,6 +169,10 @@ export enum MultiSelectClasses {
* Class name of the option element
*/
option = 'p-multiselect-option',
/**
* Class name of the option label element
*/
optionLabel = 'p-multiselect-option-label',
/**
* Class name of the empty message element
*/
Expand Down
10 changes: 9 additions & 1 deletion packages/primeng/src/overlay/overlay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -602,7 +602,15 @@ export class Overlay extends BaseComponent {
alignOverlay() {
if (!this.modal) {
if (this.overlayEl && this.targetEl) {
this.overlayEl.style.minWidth = getOuterWidth(this.targetEl) + 'px';
const targetWidth = getOuterWidth(this.targetEl);
this.overlayEl.style.minWidth = targetWidth + 'px';

if (this.overlayOptions.autoMaxWidth) {
this.overlayEl.style.maxWidth = targetWidth + 'px';
Comment thread
ayush1298 marked this conversation as resolved.
} else {
this.overlayEl.style.maxWidth = '';
}

if (this.$appendTo() === 'self') {
relativePosition(this.overlayEl, this.targetEl);
} else {
Expand Down
9 changes: 7 additions & 2 deletions packages/primeng/src/select/select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const SELECT_VALUE_ACCESSOR: any = {
<svg data-p-icon="check" *ngIf="selected" [class]="cx('optionCheckIcon')" [pBind]="$pcSelect?.ptm('optionCheckIcon')" />
<svg data-p-icon="blank" *ngIf="!selected" [class]="cx('optionBlankIcon')" [pBind]="$pcSelect?.ptm('optionBlankIcon')" />
</ng-container>
<span *ngIf="!template" [pBind]="$pcSelect?.ptm('optionLabel')">{{ label ?? 'empty' }}</span>
<span *ngIf="!template" [class]="cx('optionLabel')" [pBind]="$pcSelect?.ptm('optionLabel')">{{ label ?? 'empty' }}</span>
<ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
</li>
`,
Expand Down Expand Up @@ -272,7 +272,7 @@ export class SelectItem extends BaseComponent {
#overlay
[hostAttrSelector]="$attrSelector"
[(visible)]="overlayVisible"
[options]="overlayOptions"
[options]="{ ...overlayOptions, autoMaxWidth: autoWidth }"
[target]="'@parent'"
[appendTo]="$appendTo()"
[unstyled]="unstyled()"
Expand Down Expand Up @@ -680,6 +680,11 @@ export class Select extends BaseInput<SelectPassThrough> implements AfterViewIni
* @group Props
*/
@Input({ transform: booleanAttribute }) autofocusFilter: boolean = true;
/**
* Whether the width of the overlay mirrors the width of the component.
* @group Props
*/
@Input({ transform: booleanAttribute }) autoWidth: boolean = true;
/**
* When specified, filter displays with this value.
* @group Props
Expand Down
12 changes: 12 additions & 0 deletions packages/primeng/src/select/style/selectstyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,18 @@ const style = /*css*/ `
.p-select.ng-invalid.ng-dirty .p-select-label.p-placeholder {
color: dt('select.invalid.placeholder.color');
}

.p-select-option-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Comment thread
ayush1298 marked this conversation as resolved.

.p-select-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;

const classes = {
Expand Down