Сделать прокручиваемым ngTags

Question

Может кто-нибудь сказать мне, как сделать прокрутку ng-input-tag(Angular) в направлении X. В настоящее время, если я вставлю теги, то высота div увеличится. То, что я хочу, это то, что если я продолжаю вставлять теги, то он должен прокручиваться в направлении X

Я пробовал: ширина: авто; высота: 34px; переполнение-х: авто; переполнение-у: скрыто; пустое пространство: сейчас; Но это не сработало, как ожидалось

Так дайте мне знать, где я не прав.

Answer 1

Я знаю, что уже поздно, но недавно я видел похожие вопросы без ответа, и этот вопрос находится в верхней части поисковой системы Google по этой проблеме. Это можно сделать, используя только CSS. Если вы хотите добавить визуальный эффект, попробуйте настроить полосу прокрутки.

Для направления X:

Это может стать немного уродливым, если вы решите установить минимальную ширину или ширину для ваших тегов.

Единственный способ сделать это в направлении X - использовать flexbox:

tags-input .tags .tag-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

tags-input .tags .tag-item {
    /* Applying this display class */
    display: inline-table;        

    /* OR set the tag width to ensure that the text is visible */
    min-width: 150px; /* Could also use width: 123px */
}

Эта проблема Github также напрямую связана с проблемой.

Для направления Y:

Применение фиксированной высоты к .tags класс и настройка overflow-y Чтобы прокрутить даст вам желаемый результат:

.tags {
    height: 34px;
    overflow-y: scroll;
}

Answer 2

Попробуй это

простой CSS, чтобы добавить теги-класс ввода для прокрутки по осям X и Y

.tags-input {
      max-width: 100%;
      line-height: 22px;
      overflow-y: scroll;
      overflow-x: scroll;
      height: 65px;
      cursor: text;
 }