Как сделать выбранное значение в одиночном выборе похожим на множественный выбор

При выборе реакции, если я использую множественный выбор, все выбранные значения отображаются в виде таблеток, и все поле ввода увеличивается, чтобы отображать все выбранные значения. Но в случае одиночного выбора он просто остается фиксированным, а любой выходящий за пределы текст обрезается многоточием. Существуют сценарии, в которых одиночный выбор будет иметь ограниченную ширину в пользовательском интерфейсе, но я могу настроить область по высоте, чтобы пользователь мог видеть весь выбранный параметр. Это возможно с изменениями CSS? Или есть какой-то конфиг для этого?


reactjs react-select
person Vivek V Dwivedi    schedule 18.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы предложил создать свой собственный элемент Select с пользовательским реквизитом styles следующим образом:

const styles = {
  singleValue: base => ({
    ...base,
    // You will to add a bit more space around your option so it can fit
    maxWidth: "calc(100% - 10px)",
    position: "relative",
    textOverflow: "initial",
    top: "initial",
    transform: "none",
    whiteSpace: "initial"
  })
};

<Select options={options} styles={styles} />

Одним из важных моментов является сброс позиции absolute элемента.

Вот живой пример.

person Laura    schedule 18.04.2019