Position popup open in Vue Drop down button component
27 Feb 20232 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.
<template>
<ejs-dropdownbutton id="ddBtn" :items='items' cssClass= 'e-caret-up' :open='onOpen'>Clipboard</ejs-dropdownbutton>
</template>
<script>
import Vue from 'vue';
import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
import { OpenCloseMenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(DropDownButtonPlugin);
export default {
data () {
return {
items:[
{
text: 'Cut'
},
{
text: 'Copy'
},
{
text: 'Paste'
}]
};
},
methods: {
onOpen: function(args: OpenCloseMenuEventArgs) {
args.element.parentElement.style.top = document.getElementById('ddBtn').ej2_instances[0].element.getBoundingClientRect().top - args.element.parentElement.offsetHeight +'px';
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
.e-dropdown-btn{
margin: 25% 5px 25px 30%;
}
</style>