Subcategory menu too narrow

Contribute UX

AI-generated summary

The discussion is about the subcategory menu being too narrow. phisch shared a screenshot of the issue, explaining that the menu is not wide enough to accommodate long subcategory names. zogstrip suggested using CSS to change the menu’s width, which phisch had already tried but was unsuccessful.

cpradio provided a CSS solution to set the menu’s minimum width, but phisch pointed out that the text in the menu still gets shortened. cpradio asked for a link to phisch’s site to investigate further.

Stranik suggested adding CSS to adjust the badge category’s max-width, which cpradio built upon. However, phisch was still experiencing issues until they found a solution by adding display: inline-table; to the CSS. phisch thanked everyone for their support.

1

Hey,

As said in the title:

image.png225×366 7.58 KB

Because we have rather long subcategory names, i’d like the menu to be as wide as needed and not fixed size.

Best,
Philipp

2

Have you tried changing the width of that menu with CSS?

3

Yes, But I didn’t manage to do that.

4

You will want something like this:

.category-dropdown-menu { min-width: 200px; }

Note: This impacts the parent category drop down too

5

Hey,
Thanks. It’s hardcoded and not adjusting to the actual need, but it would still be fine if not only the menu would widen but also the content of the rows. The text stays shortened.

6

Is your site public? Can you provide a link, as the rows expand when I do it via the dev tools.

7 
.list-controls .category-dropdown-menu .badge-wrapper.bullet .badge-category {
    max-width: ***px;
}
「いいね！」 1
8

Yes, it is: https://disk.diehumanisten.de

9

@Stranik was very close with his addition (you actually have the bar style instead of bullet, so I just removed the style indicator entirely from the CSS).

Your complete CSS will be

.category-dropdown-menu { min-width: 200px; }
.list-controls .category-dropdown-menu .badge-wrapper .badge-category { max-width: 100%; }
「いいね！」 3
10

Is it working for you? I still have the same result.

EDIT:
I found adding

display: inline-table;

to be working. It’s weird but good enough, I guess :slight_smile:
So thanks everyone for your support (y)