Overflow Scrollable ContextMenu in React Context menu component

13 Dec 20244 minutes to read

Overflow 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);
function App() {
    let menuItems = [
        { text: 'ABS' },
        { text: 'ACOS' },
        { text: 'ACOSH' },
        { text: 'ACOT' },
        { text: 'ACOTH' },
        { text: 'AGGREGATE' },
        { text: 'COS' },
        { text: 'COSH' },
        { text: 'COT' },
        { text: 'COTH' }
    ];
    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={menuItems}/>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
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);

function App() {
    let menuItems: MenuItemModel[] = [
        { text: 'ABS' },
        { text: 'ACOS' },
        { text: 'ACOSH' },
        { text: 'ACOT' },
        { text: 'ACOTH' },
        { text: 'AGGREGATE' },
        { text: 'COS' },
        { text: 'COSH' },
        { text: 'COT' },
        { text: 'COTH' }
    ];

    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={menuItems} />
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));