Dropdown in Splitbutton (or other dropdown) - list is too long

[Stephen Hurst]

We are displaying about 25 to 30 items in a dropdown (in this case as part of a Splitbutton), but the page height is enough to show only about half of them.  The result is, it stretches the container element so that the whole application scrolls up to above the top of the window, to show the lower part of the list.

This is not OK - it has to not scroll the whole application up in the window.  Instead, what we need is either scrollbars on the dropdown list, or going to 2 columns, so all the items can be shown within the application height (even if it requires scrolling the dropdown).

Does Syncfusion have a solution for this?

[Indhumathy Loganathan]

Hi Stephen,

Greetings from Syncfusion support.

We weren't sure about whether you are using EJ1 or EJ2 Dropdown List component. Here, we have attached the documentation for EJ1 and EJ2 Dropdown List component for your reference.

EJ1 Dropdown List: https://help.syncfusion.com/angular/dropdownlist/getting-started

EJ2 Dropdown List: https://helpej2.syncfusion.com/angular/documentation/drop-down-list/getting-started

Please confirm the component if you need any further assistance.

Regards,

Indhumathy L

[Stephen Hurst]

Looking at https://ej2.syncfusion.com/angular/documentation/drop-down-button/getting-started and/or https://ej2.syncfusion.com/angular/documentation/split-button/getting-started , and other pages in those sections.  This is an Angular 16+ project, now replacing Bootstrap things with Syncfusion ones

[YuvanShankar Arunagiri]

Hi Stephen,

Sorry for the delay. We have prepared the sample based on your requirement. We can adjust the dropdown popup height using the CSS style shown below.

1. Refer to the below CSS style to customize the popup height.

.e-dropdown-popup ul {

    height: 200px;

    overflow: auto;

}

1. Using the beforeOpen event of both Split button and Dropdown button, we can customize the height of the popup.

<ejs-splitbutton [items]='items' content="Paste" iconCss="e-btn-icons e-paste" (beforeOpen)="onOpen($event)"></ejs-splitbutton>

……….

 <button ejs-dropdownbutton [items]='items' content="Profile" iconCss="e-ddb-icons e-profile" (beforeOpen)="onOpen($event)"></button>

………

  onOpen(args) {

        args.element.style.height = "200px";

        args.element.style.overflow = "auto";

    }

Split buttons sample link: https://stackblitz.com/edit/angular-m6158j?file=src%2Fapp.component.ts

Dropdown button sample link: https://stackblitz.com/edit/angular-nphw6q-exmy7t?file=src%2Fapp.component.ts

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A