Ввод с выпадающим списком в качестве метки, переполняющий экран Как сделать его отзывчивым? - PullRequest
Новая
       7

Ввод с выпадающим списком в качестве метки, переполняющий экран Как сделать его отзывчивым?

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

Я работаю над семантическим интерфейсом с React. У меня есть проблема, когда выпадающие поля достаточно велики, и мне нужно разбить их на несколько строк. Но вместо того, чтобы разбивать его на строки, он перетекает с экрана. 

const options = [
  { key: ".comwewfwfwf", text: ".comwr2u3rbirubiubiubib", value: ".com" },
  { key: ".net", text: ".netpojpj0w9jefwfbwiofbw", value: ".net" },
  { key: ".org", text: ".orgwoefifoifoioiwoifwoicnwoinwonwo", value: ".org" }
];
const App = () => (
  <Input
    label={
      <Dropdown
        className="cdd"
        direction="left"
        placeholder="Select Currency"
        search
        options={options}
      />
    }
    labelPosition="right"
    direction="right"
    placeholder="Your Deposit"
    value={1}
  />
);

1 Ответ

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

Метка в этом контексте имеет текст, который будет отображать и расширять саму Метку, чтобы заполнить ширину. Текст не будет переноситься, даже с пробелами. Если вы хотите сделать что-то, чтобы выделенный текст был перенесен на новую строку в ярлыке выпадающего меню, для этого вам потребуется добавить собственный CSS-код.

Я бы порекомендовал установить max-width, чтобы убедиться, что даже длинный текст не всплывает. Затем у вас есть несколько вариантов. Либо удерживайте текст в одной строке и используйте CSS для добавления многоточия для переполнения текста, либо вы можете настроить отображение текста, чтобы добавить дефисы или другие свойства разрыва.

Это все пользовательский CSS, а не функция Semantic UI React или того, как стили Semantic UI работают "из коробки".

...