How to Position popup open in React DropDownButton component

React

Search results

18 Jan 2022 / 1 minute to read

Popup open position can be changed according to the requirement. Popup open position can be changed in open event by setting top and left for the popup element.

In the following example, the top position of the popup element is changed in open event.

Source

Preview

app.tsx

index.html

styles.css

app.jsx

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.
class App extends React.Component<{}, {}> {
    public ddb: DropDownButtonComponent;
    public items: ItemModel[] = [
      {
          text: 'Cut'
      },
      {
          text: 'Copy'
      },
      {
          text: 'Paste'
      }];
    constructor(props: any) {
        super(props);
        this.onOpen = this.onOpen.bind(this);
    }
    // To open popup in particular position.
    public onOpen (args: OpenCloseMenuEventArgs) {
      const elem = (args.element.parentElement as HTMLElement);
      elem.style.top = this.ddb.element.getBoundingClientRect().top - elem.offsetHeight +'px';
    }
  
    public render() {
      return (
        <div>
          <DropDownButtonComponent ref= {(scope) => { this.ddb = scope as DropDownButtonComponent; } } items = {this.items} open={this.onOpen} cssClass='e-caret-up'>Clipboard</DropDownButtonComponent>
        </div>
      );
    }
  }
ReactDom.render(<App />,document.getElementById('button'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DropDownButton</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.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='button'>
        <div id='loader'>Loading...</div>
    </div>
</body>

</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-caret-up .e-caret::before {
  content: '\e918';
}

.e-dropdown-btn, .e-dropdown-btn.e-btn{
	margin: 25% 5px 20px 30%;
}

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.
class App extends React.Component {
    constructor(props) {
        super(props);
        this.items = [
            {
                text: 'Cut'
            },
            {
                text: 'Copy'
            },
            {
                text: 'Paste'
            }
        ];
        this.onOpen = this.onOpen.bind(this);
    }
    // To open popup in particular position.
    onOpen(args) {
        const elem = args.element.parentElement;
        elem.style.top = this.ddb.element.getBoundingClientRect().top - elem.offsetHeight + 'px';
    }
    render() {
        return (<div>
          <DropDownButtonComponent ref={(scope) => { this.ddb = scope; }} items={this.items} open={this.onOpen} cssClass='e-caret-up'>Clipboard</DropDownButtonComponent>
        </div>);
    }
}
ReactDom.render(<App />, document.getElementById('button'));