Make ngTags scrollable

Question

Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction. Currently if I insert the tags then the height of the div increases. What I want is that If I go on inserting the tags then it should scroll in X-direction

I have tried: width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap; But it didn't work as expected

So let me know where I am wrong.

Answer 1

I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.

For the X direction:

This can get a bit ugly if you decide to set a min-width or width on your tags.

The only way I've found to do it in the X direction is using 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.

For the Y direction:

Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:

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