Customize popup width in EJ2 JavaScript Drop down button control

14 Dec 20243 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.

ej.base.enableRipple(true);

//Initialize action items.
var 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'
    },
];

// initialize DropDownButton component
var drpDownBtn = new ej.splitbuttons.DropDownButton({
    items: items,
    popupWidth: '200px'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <button id="element">DropDownButton</button>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}