AntD dropdown width keeps changing based on the option that I choose from the menu

Question

How can I have a fixed length dropdown in AntD whose width won't change depending on the option chosen from the menu? Here is my code and a screenshot of what it looks like:

        const menu = (
          <Menu onClick={({ key }) => handleStatusMenuClick(key, index, pagination.current, pagination.pageSize)}>
            <Menu.Item key="Complete">Complete</Menu.Item>
            <Menu.Item key="Not Complete">Not Complete</Menu.Item>
            <Menu.Item key="Cancelled">Cancelled</Menu.Item>
          </Menu>
        );

        
        const uniqueKey = `${index}_${pagination.current}`;
        console.log(uniqueKey);
        return (
          <>
          <a href=''>{text[0]}</a>
          <br />
          <Dropdown.Button overlay={menu} trigger={['click']} key={uniqueKey} style={{width:'100%'}}>
            <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()} style={{color:'black' }}>
              {record.order_number_and_status[1] || 'Status'}
            </a>
          </Dropdown.Button>
          </>
          
        );
      }

This is what the result looks like:

Any help would be highly appreciated!!

Answer 1

You need to give style to ant-dropdown-button children to give a fixed size and make a ellipsis to the text when it overflows.

There are several ways to add style but i will go with a simple .css file and adding the next few lines where you style the button inside every element who has ant-dropdown-button class:

.ant-dropdown-button > button {
  width: 110px;
  overflow: hidden;
}

.ant-dropdown-button > button > span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

Then you just have to import the css to the file where Dropdown.button element appears and thats all.

This is a codesandbox example.