使 ngTags 可滚动

Question

谁能告诉我如何使ng-input-tag(Angular(在X方向上可滚动。目前，如果我插入标签，则div的高度会增加。我想要的是，如果我继续插入标签，那么它应该在 X 方向上滚动

我试过：宽度：自动;高度：34px;溢出-x：自动;溢出-y：隐藏;空白：无换行;但它没有按预期工作

所以让我知道我错在哪里。

Answer 1

我知道

这已经很晚了，但我最近看到类似的问题没有得到解答，这个问题在谷歌搜索这个问题的顶部。这只能使用 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;
 }