yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue

Home Page:https://yaireo.github.io/tagify/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature request: scroll all tags within one line, instead of growing the input

dandv opened this issue · comments

For editing tags within tables, it's useful to be able to limit the display of tags to a single line of defined width (example). Is this possibel with tagify? (From the README and the demos, apparently not).

The FR is to have an option specifying the maximum number of lines the input can grow to (default 0 = unlimited; typically 1). The tags should be scrolled through the same way the characters in an <input type="text"> are scrolled when they can't all fit in the width of the input.

Thanks!

You don't need me for this, you can do it now with CSS.

Give overflow: auto; to the <tags> element and remove the flex-wrap: wrap; property.

I am not sure how you did the above.
I've tried with or without style=overflow:auto
<input id="test" type="text" style="overflow:auto">
but it didn't work. As you can see below, it's overflown for long word.
Capture

I used mixed text and tags tagify field.
The solution in my case was to add to .tagify__input class property white-space: nowrap. Hope it helps!

@MenAtWeb Here's a working demo: https://jsbin.com/hepehuk/edit?css,output

Type a tag with spaces then press enter, it all goes wrong

You need to add the following:

.tagify__tag-text, .tagify__input {
	white-space: nowrap !important;
}

The !important is only needed if the style loads or is created before "tagify.css" is loaded.