Extend tag dropdown menu via CSS

Hi, I’m hoping this is a simple question.

Some of our tags are fairly long, and they either:

  1. flow into two rows in the tag dropdown box
  2. are cut-off on the tag page/individual threads

I feel like I’ve found this before, but can’t seem to find it now while searching the meta. Is there simple CSS code that will allow us to extend the tag dropdown box, and to prevent tags from being cut off in the tags page/topics pages?

Thanks!

Can you show a small screenshot of your issues? Just to make sure what you mean.

Sure!

Tags page:

Drop down:

Topic page:

I should add that this is our current CSS for tags:
.discourse-tag.box {
border-radius: 8px;
//box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
//background-color: #0f82af !important;
//color: #fff !important;
text-transform: uppercase;
font-size: 11px;
//padding: 3px;
//font-weight: bold
}

Let me know if you have any other questions!

Thanks!!!

You can try:

.select-kit.tag-drop .select-kit-body {
    width: auto;
}

.discourse-tag {
    overflow: visible;
}

Though you should probably not apply those changes on mobile.
Even on desktop, it might overlap with others things. That’s why they are cut.

EDIT: To not overlap, you could also:

.discourse-tag {
    white-space: initial;
    word-break: break-word;
}

You can also play with max-width if you don’t want a max width.

4 Likes