antd下拉菜单：所选值显示在select之外

Question

我的代码使用的是ant Design（antd）。 在我的下拉列表中，我使用<span>标记将我的列表显示为两列。

<Select value={'AccountID'} style={{'width':'212px','height':'32px'}}  placeholder="Select An Accounts">
                    <Option disabled value='0'>Select An Account</Option>
                        {this.props.accountList.length && this.props.accountList.map((value,index)=>(
                          <Option  value={value.AccountID} key={index}>
                           {value.Name} <span style={{float:'right'}}> {value.TypeName} </span>
                          </Option>
                        ))}
                    </Select>

问题是，当我选择了诸如货运和运费之类的长选项时，选择CostOfGoodsSold后会在控制外部显示，如下所示。

作为替代解决方案，

如果我增加select标签的with：

选择后，两个值之间没有空格显示。 我需要价值观之间的空间。

如何克服这个问题？ PS：未应用任何其他CSS。 演示： 沙箱

Answer 1

根据您的要求，我想使用百分比来解决您的问题，

在antd中有一个称为dropdownStyle的属性，您可以使用它来设计下拉菜单的选项。

因此，通过应用

 dropdownStyle={{ minWidth: "50%", height: "32px" }}

您应该能够添加选项。

这是您选择的样子

<Select
    placeholder="Select An Account"
    dropdownStyle={{ minWidth: "50%", height: "32px" }}
    style={{ minWidth: "50%", height: "32px" }}
  >
    <Option value="1">
      Freight and Shipping Cost
      <span style={{ float: "right" }}> Cost of Goods Sold</span>
    </Option>
    <Option value="2">
      Sales
      <span style={{ float: "right" }}> Income</span>
    </Option>
  </Select>

选择下拉列表后，没有属性可以覆盖，因此您需要将CSS应用于该属性。 对于所选项目。

.ant-select-selection-selected-value {
  width: 100%;
}

沙盒演示