Customize popup width in React Drop down button component

13 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.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {

  let 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'
    }];

  return (
    <div>
      <DropDownButtonComponent items={items} popupWidth="200px">
        DropDownButton
      </DropDownButtonComponent>
    </div>
  );
}

export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {

  let items: ItemModel[] = [
    {
      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'
    }];

  return (
    <div>
      <DropDownButtonComponent items={items} popupWidth="200px">
        DropDownButton
      </DropDownButtonComponent>
    </div>
  );
}

export default App;
ReactDom.render(<App />, document.getElementById('button'));