Display full categories full name

Product Support

AI-generated summary

The discussion, titled “Display full categories full name,” revolves around a user’s request to display full category names in the Discourse interface, as they are currently truncated after 14 characters. sebastien highlights the issue, which makes the interface confusing. codinghorror mentions that a fix is planned via a new select-kit replacement, but in the meantime, CSS overrides can be used. Johani suggests increasing the .category-dropdown-menu minimum width to accommodate longer names, providing a CSS example and a visual result. sebastien notes that increasing the menu size alone doesn’t solve the truncation issue. Finally, sebastien shares a working CSS solution: setting max-width: none !important for .category-dropdown-menu and .badge-category to prevent text truncation.

1

Hi all,

Let me start by wishing you guys an happy new year 2018 :smiley::smiley:

One of my users asked me if it’s possible to display the categories/sub-categories full name. Currently it seems names are truncated after the 14 characters.

image
image271×224 10.3 KB

It makes the UEX slightly confusing.

Thx
Seb

2

There are plans for @j.jaffeux to replace this problem element with our newer select-kit, hopefully that will happen early in 2018, beyond that you can override the css in Admin, customize.

3

This might not cover everything but it’s a start.

.category-dropdown-menu is set to minimum-width: 131px by default.

You can override that number to increase the width to accommodate for wider category names..

For example, this:

.category-dropdown-menu {
    min-width: 180px; //Increase the number to the desired width.
}

Will give you this result:

Capture
Capture722×521 22.7 KB

4

Hi,

Thx for your quick answer. I can increase the menu size but the text still get truncated.

image
image441×283 14.7 KB

5

Got it working with the following CSS code

.category-dropdown-menu, .badge-category {
       max-width: none !important;
}