Customize Popup Width in Vue Drop down button component

14 Dec 20244 minutes to read

The dropdown popup width can be customized using the popupWidth property of the DropDownButton component. By default, the popup’s width adjusts based on the content. However, this property allows setting a specific width, ensuring consistency and alignment with design requirements. The width can be specified using common CSS units or as a raw pixel value.

<template>
    <ejs-dropdownbutton :items='items' :popupWidth="'200px'">DropDownButton</ejs-dropdownbutton>
</template>

<script setup>
import { DropDownButtonComponent as EjsDropdownbutton } from "@syncfusion/ej2-vue-splitbuttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const items = [
    {
        text: 'Selection',
        iconCss: 'e-icons e-list-unordered'
    },
    {
        text: 'Yes / No',
        iconCss: 'e-icons e-check-box'
    },
    {
        text: 'Text',
        iconCss: 'e-icons e-caption'
    },
    {
        text: 'None',
        iconCss: 'e-icons e-mouse-pointer'
    }
];
</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";
</style>
<template>
    <ejs-dropdownbutton :items="items" :popupWidth="'200px'">DropDownButton</ejs-dropdownbutton>
</template>

<script>
import { DropDownButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
    name: "App",
    components: {
        "ejs-dropdownbutton": DropDownButtonComponent
    },
    data() {
        return {
            items: [
                {
                    text: 'Selection',
                    iconCss: 'e-icons e-list-unordered'
                },
                {
                    text: 'Yes / No',
                    iconCss: 'e-icons e-check-box'
                },
                {
                    text: 'Text',
                    iconCss: 'e-icons e-caption'
                },
                {
                    text: 'None',
                    iconCss: 'e-icons e-mouse-pointer'
                }
            ]
        };
    }
}
</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";
</style>