yairEO/tagify

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

dandv opened this issue · 6 comments

dandv commented

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!

yairEO commented

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.

MenAtWeb commented

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

yairEO commented

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

  • 👍1
  • 👎1
catfishcoder commented

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!

jplevene commented

@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.

  • 👍2