Scrollable ContextMenu can be achieved by restricting the height of the ul
element.
In the following example, the height
of the ContextMenu is set as 150px
and overflow
property is set
as auto
.
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
class App extends React.Component {
constructor() {
super(...arguments);
this.menuItems = [
{ text: 'ABS' },
{ text: 'ACOS' },
{ text: 'ACOSH' },
{ text: 'ACOT' },
{ text: 'ACOTH' },
{ text: 'AGGREGATE' },
{ text: 'COS' },
{ text: 'COSH' },
{ text: 'COT' },
{ text: 'COTH' }
];
}
render() {
return (<div className="container">
<div id='target'>Right click / Touch hold to open the ContextMenu</div>
<ContextMenuComponent id='contextmenu' target='#target' cssClass='e-custom' items={this.menuItems}/>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ContextMenu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/button/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>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#container {
visibility: hidden;
}
.e-custom ul {
height: 150px;
overflow: auto;
}
#target {
border: 1px dashed;
height: 150px;
padding: 10px;
position: relative;
text-align: justify;
color: gray;
user-select: none;
}
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
class App extends React.Component<{}, {}> {
public menuItems: MenuItemModel[] = [
{ text: 'ABS' },
{ text: 'ACOS' },
{ text: 'ACOSH' },
{ text: 'ACOT' },
{ text: 'ACOTH' },
{ text: 'AGGREGATE' },
{ text: 'COS' },
{ text: 'COSH' },
{ text: 'COT' },
{ text: 'COTH' }
];
public render() {
return (
<div className="container">
<div id='target'>Right click / Touch hold to open the ContextMenu</div>
<ContextMenuComponent id='contextmenu' target='#target' cssClass='e-custom' items={this.menuItems} />
</div>
);
}
}
ReactDom.render(<App />,document.getElementById('element'));