Having trouble getting help?
Contact Support
Contact Support
Enable scroller in EJ2 TypeScript List box control
29 Jul 20233 minutes to read
The ListBox supports scrolling and it can be achieved by restricting the height of the list box using height
property.
In the following sample, height
of the list box is restricted to 290px
.
import { ListBox } from '@syncfusion/ej2-dropdowns';
// define the array of object
let data: { [key: string]: Object }[] = [
{ text: 'Account Settings', id: 'list-01' },
{ text: 'Address Book', id: 'list-02' },
{ text: 'Delete', id: 'list-03' },
{ text: 'Forward', id: 'list-04' },
{ text: 'Reply', id: 'list-05' },
{ text: 'Reply All', id: 'list-06' },
{ text: 'Save All Attachments', id: 'list-07' },
{ text: 'Save As', id: 'list-08' },
{ text: 'Touch/Mouse Mode', id: 'list-09' },
{ text: 'Undo', id: 'list-10' }
];
// initialize ListBox component
let listObj: ListBox = new ListBox({
//set the data to dataSource property
dataSource: data,
height: '290px'
});
listObj.appendTo('#listbox');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 ListBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<input id='listbox' />
</div>
</body>
</html>