Background shows through when the tag text wraps to multiple lines

[WilliamMayor]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

I certainly looked in the docs and the existing issues, but if I've missed something, let me know (and sorry)!

💥 Demo Page

https://jsbin.com/lavojahanu/edit?html,js,output

Explanation

What is the expected behavior? Tags with very long names wrap to multiple lines when there isn't enough space, the background colour of the tag remains solid.

What is happening instead? When tags wrap there is a bar that runs through the centre of the tag, I think it's transparent because I'm seeing the background colour come through.

This is because (AFAICT) the --tag-bg setting is used to colour a box-shadow, and when the tag wraps, the box is so tall that the shadow doesn't meet in the middle

Setting the background-color to var(--tag-bg) seems to solve the problem, but I assumed that box-shadow was used for a good reason and so wanted to check that I wasn't messing something up.

What error message are you getting?

No error messages but here are some screenshots: This one's from the official docs site, when I change the default bg colour and shrink the page

This one's from our site where we have a tag that just has an awful lot of text

Thanks!

[yairEO]

Duplicate of: https://github.com/yairEO/tagify/issues/1208 https://github.com/yairEO/tagify/issues/1263 https://github.com/yairEO/tagify/issues/1299

[WilliamMayor]

Thanks! I was looking for issues with wrapping, but I can see those are obviously the same thing.

Because I'm getting this issue only when the tags are particularly long, I don't think I can set the inset shadow size can I? It would need to be bigger, but the size is dependent on the length of the tag, and therefore the nubmer of times it wraps.

I tried bumping the inset size up in the demo page and I could still see the gap if I shrunk the page down enough.

Can I ask what the consequences would be of setting a background colour on the tag instead of/as well as the box shadow?

Thanks again!

[yairEO]

Why do you want your tags to wrap and not have them trimmed? It looks better when trimmed so all the tags have the same height

[WilliamMayor]

So the user can always read the entire text without needing to hover for a tooltip/title. I don't mind if there's a little extra whitespace around the tags, if it means you can glance at the input and see what all the tags are.

[yairEO]

Well, you have access to the CSS of the tags, which is not very complex, so you can style them however you see fit for your use case

[WilliamMayor]

Absolutely! I'll give that a whirl. I just wanted to check that setting the background-color isn't some kind of footgun? Will it break something if I do that?

[yairEO]

@WilliamMayor -I honestly don't know if it will break something :D

I wrote some parts of the code years ago and am maintaining quite a lot of other projects and don't remember what are the implications of having a background color set. I don't understand why can't you solve this with big-enough --tag-inset-shadow-size value though... it just won't be animated as well, but still you shouldn't be able to see any gap if your text wraps in multiple lines, as long as it's not extreme, like 10 lines of text.. which is still doable but I would quite that quite an ugly design :)