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.
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'));
<!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/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/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, 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'));