Tags with title "box" displaying as a big box


(Jeremy M) #1

Hard to explain, but I just noticed that the “box” tag displays as a large box compared to the other tags:

image

v2.1.0.beta5 +84


(Kris) #2

Ah, so this is a class collision… this can actually a problem with any CSS we prefix with tag- for example, it also breaks if you use the tag name “chooser” because of our class .tag-chooser

There are a couple ways to solve this, but unfortunately this will break tag styling for anyone who’s done it:

  • Use a data attribute instead of a class for targeting tags with CSS
  • Come up with a more verbose class name like .tag-name-box

We could alternatively never use .tag- in core CSS, but that’s a big restriction to assume


(Kris) #4

I just merged in a change that will move tag names to data attributes.

so now to style a tag named box you’d use this

[data-tag-name="box"] {
  // styles here
}

I went with a data attribute because it reduces the possibility of future class collisions to 0.


Add a custom fontawesome icon and color to your tag
(Kris) #7

This topic was automatically closed after 3 days. New replies are no longer allowed.