React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Position popup open in React DropDownButton component

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'));
Previous
Next