response-select V2 - как добиться `overflow-x: hidden` для` isMulti` `ValueContainer` - PullRequest
Новая
       5

response-select V2 - как добиться `overflow-x: hidden` для` isMulti` `ValueContainer`

0 голосов
/ 09 сентября 2018

Я пытаюсь выяснить, как получить реагирующий выбор компонента V2 , который установлен на isMulti, чтобы скрыть выбранные значения, когда они превышают ширину ValueContainer (вместо переход на новую строку и увеличение высоты компонента).

Я пытался добиться этого (без удачи), применяя следующий стиль к valueContainer: 

 valueContainer: base => ({
            ...base,
            overflowX: "hidden"
          })

Вот пример нежелательного поведения (моя цель - получить 3-е значение, которое будет частично скрыто или усечено в той же строке, что и другие 2 значения, вместо появления на новой строке).

Есть предложения?

1 Ответ

0 голосов
/ 09 сентября 2018

Попробуйте использовать стиль CSS inline-block. 

valueContainer: base => ({
        ...base,
        display: "inline-block",
        overflowX: "hidden"
      })

Если вы также примените этот стиль к элементу input, он также избежит переноса. 

    valueContainer: base => ({
        ...base,
        display: "inline-block",
        overflowX: "hidden"
      }),
    input: base => ({
        ...base,
        display: "inline-block"
      })

И, если вы предотвращаете разрыв между блоками, добавляя whiteSpace: 'nowrap' к содержащему control, это должно держать все элементы в одной строке: 

      control: base => ({
        ...base,
        width: 200,
        whiteSpace: "nowrap"
      }),
      menu: base => ({ ...base, width: 200 }),
      valueContainer: base => ({
        ...base,
        overflowX: "hidden",
        display: "inline-block"
      }),
      input: base => ({
        ...base,
        display: "inline-block"
      })
...