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

Possible to add random colors for each tag? #223

Closed
hamzabinamin opened this issue Apr 25, 2019 · 3 comments
Closed

Possible to add random colors for each tag? #223

hamzabinamin opened this issue Apr 25, 2019 · 3 comments

Comments

@hamzabinamin
Copy link

I'm showing tags in a particular column of a data row. I want each tag to have a distinct or a random color instead of all being grey. How can I do that?

If that's not possible, then is there a way I can use a different color for each of the tag input elements through html?
Something like:
<input name="tags'" value="" readonly style="color: red;">

@yairEO
Copy link
Owner

yairEO commented Apr 25, 2019

Ok, I've just updated the demo page as to your request, but you also need to make sure you're using the at least Tagify version 2.18.1

In this random tag color demo I was using the transformTag Tagify setting, which I think is the most suited place to make the change, but there's another way, which is to create your own tag function (see here how).

A completely different 3rd way would be to do this entirely via your CSS (:nth-child selectors), but this limits you to a finite set of colors, since you don't want to repeat similar colors.

@yairEO yairEO closed this as completed Apr 25, 2019
@hamzabinamin
Copy link
Author

This works great thanks @yairEO however I've noticed the colors don't work if I make the tags readonly. Can you change that? I'm displaying a list that is coming from the db, so the user won't be writing any new tags themselves. Also would be nice if I can somehow hide the border of the input field. Since the tags class is somehow overriding the behavior.

@yairEO
Copy link
Owner

yairEO commented Apr 27, 2019

Why do you even need Tagify at all? why can't you just create some simple template which iterate over your list and creates tabs (<div>) elements and then simply style them?

If you wish to have random colors on read-only tags you could modify Tagify's CSS and remove the rule which overrides the colors specifically for read-only ones.

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

2 participants