5

ng-input-tag(Angular) を X 方向にスクロール可能にする方法を教えてください。現在、タグを挿入すると、div の高さが増加します。私が欲しいのは、タグを挿入し続けると、X方向にスクロールする必要があるということです

私が試した：幅：自動;高さ：34px;オーバーフロー-x：自動;オーバーフロー-y：非表示;空白：nowrap; しかし、期待どおりには機能しませんでした

だから私が間違っているところを教えてください。

4

2 に答える 2

3

これが遅れていることはわかっていますが、最近、同様の質問が回答されていないのを見てきました。これは、この問題の Google 検索の一番上にあります。これは、CSS のみを使用して実行できます。視覚効果を追加したい場合は、スクロールバーをカスタマイズしてみてください。

X 方向の場合:

タグに最小幅または幅を設定することにした場合、これは少し見苦しくなります。

X方向でそれを行う唯一の方法は、フレックスボックスを使用することです:

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;
}
于 2015-07-16T15:35:01.400 に答える
0

これを試して

x 軸と y 軸でスクロールするためのタグ入力クラスに追加する単純な css

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

于 2018-01-16T12:16:59.173 に答える