Tags with title "box" displaying as a big box

bug
1

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

image

image
image1066×146 9.77 KB

v2.1.0.beta5 +84

5 Likes
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

8 Likes
4

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

https://github.com/discourse/discourse/commit/8ff83d174ee518a2f04721d3b3088924e242e648

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.

8 Likes
7

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