How to Enable Horizontal Scrollbar in the Angular DropdownList?

This Knowledge Base article addresses a common requirement where users need to display a horizontal scrollbar in the Syncfusion Angular DropDownList popup when the list items exceed the popup’s width. By default, when text wrapping is enabled, the horizontal scrollbar may not appear even if overflow settings are configured. This article provides a step-by-step solution to enable the horizontal scrollbar by adjusting CSS properties to prevent text wrapping and ensure proper overflow behavior.

Users may encounter situations where:

• Long text items in the DropDownList need to be displayed on a single line
• A horizontal scrollbar should appear when items exceed the popup width
• The current configuration shows scroll arrows but no visible scrollbar due to text wrapping

This solution demonstrates how to override the default CSS behavior to achieve the desired horizontal scrolling functionality.

Step 1: Set Up the DropDownList Component

First, ensure you have the Syncfusion Angular DropDownList component properly configured in your Angular application. Define your component template with the DropDownList element and specify the popup dimensions.

app.component.html

<div style="margin:150px auto; width: 70%">
  <ejs-dropdownlist
    [dataSource]="dropdownOptions"
    [(value)]="selectedValue"
    [fields]="fields"
    placeholder="Select method"
    popupWidth="200px"
    [popupHeight]="220"
  ></ejs-dropdownlist>
</div>

Explanation:

• The popupWidth property is set to 200px to define the popup width
• The popupHeight is set to 220px to accommodate multiple items
• The [dataSource], [(value)], and [fields] properties will be configured in the next step

Step 2: Configure the Data Source

In your component TypeScript file, define the data source with items that contain text longer than the popup width (200px). This is essential for triggering the horizontal scrollbar.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Data source with long text items to trigger horizontal scrollbar
  public dropdownOptions: { [key: string]: Object }[] = [
    { id: '1', text: 'Short Item' },
    { id: '2', text: 'This is a very long DropDownList item that exceeds the popup width' },
    { id: '3', text: 'Another long item with extensive text content for demonstration' },
    { id: '4', text: 'Medium length item text' },
    { id: '5', text: 'Extra long DropDownList item with additional content to demonstrate horizontal scrolling' },
    { id: '6', text: 'Normal Item' },
    { id: '7', text: 'Yet another extremely long text that will definitely require horizontal scrolling' }
  ];

  // Default selected value
  public selectedValue: string = '1';

  // Field mapping configuration
  public fields: Object = { text: 'text', value: 'id' };
}

• The dropdownOptions array contains items with varying text lengths
• Items with IDs 2, 3, 5, and 7 have text exceeding 200px width, which will trigger the horizontal scrollbar
• The fields object maps the data properties to the DropDownList display and value fields

Step 3: Configure List Item Styling to Enable Horizontal Scrollbar

This is the critical step. Apply CSS to enable horizontal scrolling in the popup list by configuring the list parent container and list items.

app.component.css

/* Enable horizontal scrolling for the list container */
.e-dropdownbase .e-list-parent {
  overflow: auto;
  width: fit-content;
}

/* Allow text to overflow without truncation */
.e-dropdownbase .e-list-item {
  text-overflow: unset;
}

• overflow: auto on .e-list-parent enables both horizontal and vertical scrollbars when content exceeds the container dimensions
• width: fit-content allows the list container to expand based on the content width, enabling horizontal overflow
• text-overflow: unset prevents text truncation and allows the full text to display, triggering the horizontal scrollbar when needed
• The combination of these properties ensures that long text items display on a single line with a horizontal scrollbar

Output

The output will display a DropDownList with a fixed width of 200px. When the DropDownList is opened, the popup will show list items with long text displayed on a single line. A horizontal scrollbar will appear at the bottom of the popup, allowing users to scroll horizontally to view the complete text of items that exceed the popup width.

Live Demo: Sample Implementation on StackBlitz

Conclusion

We hope you enjoyed learning how to enable horizontal scrollbar in the Angular DropdownList Popup.

You can refer to the Angular DropdownList  feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Gantt Chart example to understand how to create and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular DropdownList and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!