раскрывающийся список antd: выбранное значение отображается за пределами выбора

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: -

, пробел междудва значения после выбора.Мне нужно пространство между значениями.

Как решить эту проблему?PS: любой другой CSS не применяется.Демо: песочница

Answer 1

В соответствии с вашим требованием, я бы хотел использовать процент для решения вашей проблемы,

есть одно свойство с именем dropdownStyle в antd, которое вы можете использовать для разработки параметров раскрывающегося списка.

Итак, применив

 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%;
}

Демонстрация песочницы