使ngTags可滾動

Question

任何人都可以告訴我如何使ng-input-tag（Angular）在X方向上滾動。 目前如果我插入標籤，那麼div的高度增加。 我想的是，如果我去插入標籤，那麼它應該在X方向的滾動

我曾嘗試： 寬度：自動;高度：34像素;溢出 - X：汽車;溢出-Y：隱藏;白色空間：nowrap; 但它沒有按預期工作

所以，讓我知道我錯了。

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 */ 
} 

This Github issue is also directly related to the problem.

對於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; 
 
}