Limiting the number of items shown in the dropdown panel of an NgSelect

Question

Limiting the number of items shown in the dropdown panel of an NgSelect

Currently, I am utilizing Angular ngselect to showcase a dropdown menu with multiple options. However, due to the limited screen space, I need to restrict the number of items visible in the dropdown to about 3, allowing users to scroll through the rest.

Within a reactive form, I have integrated ng-select, and it appears as shown below:

Upon selecting the payment method, everything looks fine since there are only 2 items displayed.

However, upon choosing another option from the dropdown list, it gets cut off because the size exceeds the container's boundaries.

To address this issue, I attempted an alternative approach by appending the ng select dropdown to the body using appendTo="body".

When the dropdown appears using this method, it maintains its position rather than moving along with the ngselect element when I scroll through the page—resulting in some usability challenges.

My main concern is how to limit the number of elements displayed within the dropdown so that it fits snugly inside the container without any overflow issues.

angular typescript dropdown angular-ngselect

Answer 1

Answer №1

Check out this issue on github

Here is an example of a bottom one

And you can see the version with checkbox here

This basic example shows only 4 items visible at once, achieved by using slice:0:4 in the *ngFor directive. The span below will display "more..." if there are more than 4 items selected.

<ng-select
    [items]="daysOfWeek"
    [multiple]="true"
    bindLabel="name"
    bindValue="order"
    placeholder="Select days"
    [(ngModel)]="selectedDays">
    <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
        <div class="ng-value" *ngFor="let item of items | slice:0:4">
            <span class="ng-value-label">{{item.name}}</span>
            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
        </div>
        <div class="ng-value" *ngIf="items.length > 4">
            <span class="ng-value-label">{{items.length - 4}} more...</span>
        </div>
    </ng-template>
</ng-select>

Next, in the component file:

export class MultiSelectCustomExampleComponent implements OnInit {

    daysOfWeek: DayOfWeek[] = [];
    selectedDays: DayOfWeek[] = [];

    constructor() {
    }

    ngOnInit() {
        this.daysOfWeek = [
            new DayOfWeek("Monday", 1),
            new DayOfWeek("Tuesday", 2),
            new DayOfWeek("Wednesday", 3),
            new DayOfWeek("Thursday", 4),
            new DayOfWeek("Friday", 5),
            new DayOfWeek("Saturday", 6),
            new DayOfWeek("Sunday", 7),
        ];
    }
}

Lastly, here is the model for the list:

export class DayOfWeek {

    name: string;
    order: number;
    
    constructor(name: string, order: number) {
        this.name = name;
        this.order = order;
    }
}

Answer 2

Check out this issue on github

Here is an example of a bottom one

And you can see the version with checkbox here

This basic example shows only 4 items visible at once, achieved by using slice:0:4 in the *ngFor directive. The span below will display "more..." if there are more than 4 items selected.

<ng-select
    [items]="daysOfWeek"
    [multiple]="true"
    bindLabel="name"
    bindValue="order"
    placeholder="Select days"
    [(ngModel)]="selectedDays">
    <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
        <div class="ng-value" *ngFor="let item of items | slice:0:4">
            <span class="ng-value-label">{{item.name}}</span>
            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
        </div>
        <div class="ng-value" *ngIf="items.length > 4">
            <span class="ng-value-label">{{items.length - 4}} more...</span>
        </div>
    </ng-template>
</ng-select>

Next, in the component file:

export class MultiSelectCustomExampleComponent implements OnInit {

    daysOfWeek: DayOfWeek[] = [];
    selectedDays: DayOfWeek[] = [];

    constructor() {
    }

    ngOnInit() {
        this.daysOfWeek = [
            new DayOfWeek("Monday", 1),
            new DayOfWeek("Tuesday", 2),
            new DayOfWeek("Wednesday", 3),
            new DayOfWeek("Thursday", 4),
            new DayOfWeek("Friday", 5),
            new DayOfWeek("Saturday", 6),
            new DayOfWeek("Sunday", 7),
        ];
    }
}

Lastly, here is the model for the list:

export class DayOfWeek {

    name: string;
    order: number;
    
    constructor(name: string, order: number) {
        this.name = name;
        this.order = order;
    }
}

Limiting the number of items shown in the dropdown panel of an NgSelect

Answer №1

Similar questions

Angular 2 routing malfunctioning

Is the regex returning the correct result?

An issue occurred during the compilation of an Angular6 project

Troubleshooting a Missing Angular (8) Pipe Error in Your Ionic 4 Application

Tips for extracting the chosen text during a 'change' event

Navigating within components using code is an essential skill when working with Vue Router

Easy steps for importing node modules in TypeScript

What steps should I follow to set up a TypeScript project that incorporates JavaScript modules compiled from PureScript?

SolidJS directives utilizing use:___ result in TypeScript errors when used in JSX

Locate and retrieve the item that appears most often in a given array

How can I combine Angular's material drag and drop feature with virtual scrolling?

The dropdown menus in Bootstrap are expanding outside the screen when opened

The declaration module in Typescript with and without a body

"Utilizing aws-sdk in a TSX file within a React project: a step-by

The custom validation in nestjs is throwing an error due to an undefined entity manager

Typescript error: Cannot assign type 'undefined' to type 'string | number | symbol'

Load page with sorted column in PrimeNg's <ptable> element

Creating dynamic and engaging videos using Angular with the ability to make multiple requests

Incorporate a personalized Cypress function for TypeScript implementation

Looking for a regular expression to verify if the URL inputted is valid in TypeScript