Position popup open in Angular Drop down button component
27 Apr 20242 minutes 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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component, ViewChild } from '@angular/core';
import { ItemModel, OpenCloseMenuEventArgs, DropDownButtonComponent } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
imports: [
DropDownButtonModule
],
standalone: true,
selector: 'app-root',
template: `<div class="e-section-control">
<!-- To render DropDownButton. -->
<button ejs-dropdownbutton #dropdownbutton [items]='items' content='Clipboard' (open)='onOpen($event)'></button></div>`
})
export class AppComponent {
@ViewChild('dropdownbutton')
public dropdownbutton?: DropDownButtonComponent;
// Initialize action items.
public items: ItemModel[] = [
{
text: 'Cut'
},
{
text: 'Copy'
},
{
text: 'Paste'
}];
// To open popup in particular position.
public onOpen (args: OpenCloseMenuEventArgs) {
args.element.parentElement!.style.top = this.dropdownbutton!.element.getBoundingClientRect().top - args.element.parentElement!.offsetHeight +'px';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));