Как да накарате избраната стойност в единичен избор да расте подобно на множествения избор

В react select, ако използвам multi select, всички избрани стойности се показват като хапчета и цялото поле за въвеждане нараства, за да покаже всички избрани стойности. Но в случай на единичен избор, той просто остава фиксиран и всеки преливащ текст се отрязва от многоточие. Има сценарии, при които единичният избор ще има ограничена ширина на потребителския интерфейс, но мога да имам обхват по височина, за да коригирам, така че потребителят да може да вижда цялата избрана опция. Възможно ли е това с промени в 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