谁能告诉我如何使ng-input-tag(Angular)在X方向上滚动。
目前,如果我插入标签,则div的高度会增加。
我想要的是,如果我继续插入标签,那么它应该在X方向上滚动
我努力了:
宽度:自动;高度:34像素; overflow-x:自动; overflow-y:隐藏;空白:nowrap;
但是它没有按预期工作
所以让我知道我错了。
最佳答案
我知道这很晚了,但是最近我没有看到类似的问题,而这个问题在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 */
}
This Github issue is also directly related to the problem.
对于Y方向:
将固定高度应用于
.tags
类并将overflow-y
设置为滚动将为您提供所需的结果:.tags {
height: 34px;
overflow-y: scroll;
}