Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dandv opened this issue Nov 17, 2018 · 6 comments
Closed

Comments

@dandv
Copy link

dandv commented Nov 17, 2018

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
Copy link
Owner

yairEO commented Nov 17, 2018

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.

@yairEO yairEO closed this as completed Nov 17, 2018
@yairEO
Copy link
Owner

yairEO commented Nov 17, 2018

scrollable-tagify

@MenAtWeb
Copy link

MenAtWeb commented Nov 12, 2019

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
Copy link
Owner

yairEO commented Nov 12, 2019

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

@catfishcoder
Copy link

catfishcoder commented Feb 9, 2021

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
Copy link

jplevene commented Aug 3, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants