Make ngTags scrollable

Question

Can someone tell me how to make ng-input-tag (Angular) scrollable in X-direction. Currently, if I insert tags, the height of the div is increasing. I want that if I continue to insert tags, then it should scroll along the X axis

I tried: width: auto; height: 34px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; But it did not work as expected

So let me know where I am going wrong.

Answer 1

I know that it is already late, but I have seen that similar questions have remained unanswered recently, and this question is at the top of the Google search for this problem. This can be done using only CSS. If you want to add a visual effect, try adjusting the scroll bar.

For direction X:

This can get a little ugly if you decide to set a minimum width or width in your tags.

The only way I found this in the X direction is to use 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 issue.

For direction Y:

Applying a fixed height to the class .tagsand setting the scroll overflow-ywill produce the desired result:

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

Answer 2

try it

simple css to add to tag input class to scroll along x and y axis

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

Run codeHide result