прекратить заставлять реагировать-расширение ширины при наборе пользователя - PullRequest
Новая
       6

прекратить заставлять реагировать-расширение ширины при наборе пользователя

0 голосов
/ 21 февраля 2019

Я использую реагирующий выбор.Но, так или иначе, когда пользователь вводит столько символов, контейнер ввода растет горизонтально и даже разбивает его экран (ширину по экрану).Как сделать так, чтобы ширина была статичной в любых условиях?Пример условия: когда пользователь печатает или когда значение, отображаемое в параметре, слишком длинное, я хочу, чтобы оно отображало только некоторые символы, например:

настоящая строка: 'привет, это вариант один, чувак', отображается в опции и во входном контейнере: «привет, это опция .....»

это достижимо?как это сделать?Я пробовал это , но не работает.

вот полный код стиля для реагирования-выбора: 

const styles = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? 'grey' : 'grey',
    color: state.isSelected ? 'white' : 'black',
    ':active': {
      backgroundColor: state.isSelected ? 'grey' : 'grey',
      color: state.isSelected ? 'white' : 'white',
    },
  }),
  control: (base, state) => ({
    ...base,
    background: 'white',
    borderRadius: 0,
    borderTop: 0,
    borderLeft: 0,
    borderRight: 0,
    borderColor: state.isFocused ? 'black' : 'black', // disable blue color in the box when input focused
    boxShadow: state.isFocused ? 0 : 0,
    whiteSpace: 'nowrap',
    width: '100%',
  }),
  menu: base => ({
    ...base,
    borderRadius: 0,
    hyphens: 'auto', // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
    marginTop: 0, // kill the gap
    textAlign: 'left',
  }),
  menuList: base => ({
    ...base,
    padding: 0, // kill the white space on first and last option
    backgroundColor: 'grey',
    maxHeight: '80px',
    overflowY: 'auto',
  }),
  indicatorSeparator: base => ({
    ...base,
    display: 'none',
  }),
  dropdownIndicator: (base, state) => ({
    ...base,
    transition: 'all .2s ease',
    transform: state.isFocused ? 'rotate(180deg)' : null,
  }),
  noOptionsMessage: base => ({
    ...base,
    color: 'white',
  }),
  valueContainer: base => ({
    ...base,
    overflowX: 'hidden',
    display: 'inline-block',
  }),
  input: base => ({
    ...base,
    display: 'inline-block',
  }),
};

спасибо!

1 Ответ

0 голосов
/ 21 февраля 2019

Вы можете добавить ниже стили для вашего элемента ввода (при условии, что это valueContainer и проверить, если он скрывает переполнение 

{
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
...