Position popup open in React Drop down button component

2 Mar 20264 minutes to read

Control the popup position by adjusting the top and left coordinates in the open event. This allows you to position the dropdown popup at custom locations relative to the button or viewport.

The following example demonstrates how to reposition the popup by modifying its top position in the open event:

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

// To render DropDownButton.
function App() {
    let ddb;
    let items = [
        {
            text: 'Cut'
        },
        {
            text: 'Copy'
        },
        {
            text: 'Paste'
        }
    ];
    // To open popup in particular position.
    function onOpen(args) {
        const elem = args.element.parentElement;
        elem.style.top = ddb.element.getBoundingClientRect().top - elem.offsetHeight + 'px';
    }
    return (<div>
        <DropDownButtonComponent ref={(scope) => { ddb = scope; }} items={items} open={onOpen} cssClass='e-caret-up'>Clipboard</DropDownButtonComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel, OpenCloseMenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {
    let ddb: DropDownButtonComponent;
    let items: ItemModel[] = [
      {
          text: 'Cut'
      },
      {
          text: 'Copy'
      },
      {
          text: 'Paste'
      }];
    // To open popup in particular position.
    function onOpen (args: OpenCloseMenuEventArgs) {
      const elem = (args.element.parentElement as HTMLElement);
      elem.style.top = ddb.element.getBoundingClientRect().top - elem.offsetHeight +'px';
    }
  
    return (
      <div>
        <DropDownButtonComponent ref= {(scope) => { ddb = scope as DropDownButtonComponent; } } items = {items} open={onOpen} cssClass='e-caret-up'>Clipboard</DropDownButtonComponent>
      </div>
    );
  }
export default App;
ReactDom.render(<App />,document.getElementById('button'));