Sub-categories first in Composer category selector

[martyn_thomas]

Our users select the relevant category in the Topic Composer based on the subcategory - meaning they have to remember the category the subcategory they want to use is under in order to find it.

Is it possible to change how categories are show in the category selector so the sub category and category swap places (with sub category being first) ?

For example - a user wants to post a topic about Governance. Ideally, the Category drop-down shows ‘Governance - Admin’ (and the list is ordered by sub category)

And when selected, it’s shown as ‘Governance - Admin’ on the composer.

Thanks

[Arkshine]

A quick CSS solution could be the following. Put it in your theme or a component CSS.
It reverses category → sub-category to sub-category → category:

// Reverses position from "category -> sub-category" to "sub-category -> category"
.select-kit .select-kit-row.category-row .category-status,
#reply-control .category-input .category-chooser .selected-name .name {
    flex-direction: row-reverse;
}

// Hides the parent category when a sub-category is selected
#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-category__wrapper:first-child {
        display: none;
    }

    & > .badge-category__wrapper:last-child {
        display: unset;
    }
}

[martyn_thomas]

You are a wizard - thanks so much!

Is there a way for composer to prioritise showing the name of the subcategory over the category in the dropdown once selected or even better, only show the sub category (the categories ‘trail’ only appearing in the dropdown)?

[martyn_thomas]

After some trial and error i think i’m making progress with:

span.name .badge-wrapper:first-child {
    display: none;
}

However it doesn’t work if the option only has a category and no sub category (in which case the category needs to be show) - will keep tinkering.

[Jagster (Jakke Flemming)]

What’s wrong with the suggestion by Arkshine?

[Arkshine]

@martyn_thomas I updated my post above. You are on the right track. It misses one rule to restore display when there is no sub-category. (basically, the solution is to hide always the first element and unset the second)

[martyn_thomas]

Nothing - it worked perfectly, I’m not trying to hide the category from the the selected drop-down - basicly trying to make my composer look pretty.

[martyn_thomas]

@Arkshine

// Reverses position from "category -> sub-category" to "sub-category -> category"
.select-kit .select-kit-row.category-row .category-status,
#reply-control .category-input .category-chooser .selected-name .name {
    flex-direction: row-reverse;
}

// Hides the parent category when a sub-category is selected
#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-category__wrapper:first-child {
        display: none;
    }

    & > .badge-category__wrapper:last-child {
        display: unset;
    }
}

The first bit works (flipping Subcategory and Category), but the second bit doesn’t

I’ll have a play over the weekend to see if i can figure it out. Thanks for your help - i owe you an xmas beer.

[Arkshine]

I’m not sure. As you see in the screenshot, it works on my side.
Also, here is a video from my test forum:

[Jagster (Jakke Flemming)]

It works for me too (and makes places tidier and more logical, because we are interested in one category, not path to it — parent category is not important here)

Thanks both of you.

[martyn_thomas]

Cracked it:

In 3.1 It’s

#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-wrapper:first-child {
        display: none;
    }

    & > .badge-wrapper:last-child {
        display: unset;
    }
}

Thanks for your help everyone!

[Heliosurge (Dan DeMontmorency)]

Hi I would imagine if you don’t have too many categories without sub categories. You could use a condition.

Ie If category is not cat1, Cat2. then your code for hiding main cat from composer.

If the opposite change to if catX, Cat,Y then your code.

Which spot do we need to put this when creating the component?