Categories Only view remade into two columns

[loginerror (Maciej Kuźmicz)]

Continuing the discussion from How to style the `/categories` page?:

I have a question related to an older discussion.

How trivial is it to achieve this:

The closest I got is this:

By applying column-count: 2 to the DIV surrounding the table and display: block to the table elements.

But I am not sure how to force the header to span across the entire line

EDIT.
I have just realized that functionally, I would either have to duplicate this header row, leave only Categories or simply hide it all…

[awesomerobot (Kris)]

I think it might be easier if you make tbody display: block and column-count: 2? Then the thead will still span the full width.

But yeah at that point you’ll want to hide everything aside from “Category” anyway.

[Canapin (Coin-coin le Canapin)]

Alternative with flexbox:

.category-list tbody {
    display: flex;
    flex-wrap: wrap;
}
.category-list tbody tr {
    width: 50%;
    display: flex;
}
.category-list tbody .category {
    flex: 1;
}

Still a few tweaks to do though.

[loginerror (Maciej Kuźmicz)]

@Canapin

Alternative with flexbox:

In the midst of it, I forgot that it would be nice if they keep horizontal alignment.
This is fantastic

[Canapin (Coin-coin le Canapin)]

Notice that with this css the categories won’t be listed such as:

1 - 4
2 - 5
3 - 6

But as:

1 - 2
3 - 4
5 - 6

Also you need to add a media query to change the style on small screen.

[loginerror (Maciej Kuźmicz)]

I’ve played a bit with both options, and it would seem that spiting the table of categories in half rather than sequentially is better for our purpose.

However, it is tricky to control where it should split.

I was able to achieve this in my browser:

But only when I artificially placed the categories on the left in a div (to prevent it from splitting too early, otherwise the Measure root category goes to the right column):

Is there a way to ‘pack’ the rows with specific category IDs into the DIV, maybe via the theme api?

[Canapin (Coin-coin le Canapin)]

What you’re asking seems tricky and may require some JS magic.
With the CSS column property, I’m confident that the categories won’t be horizontally aligned (unless you set a fixed height) as they are with flexbox and it’s not very pretty.

I achieved what you want but it’s a bit hacky:

I used my previous CSS, then added an empty <tr> (which I believe can be done with a single JS line) and set the order property to change the order of the divs. The latter can be done via CSS only by targetting each data-category-id HTML value. Here’s the result:

Here’s the empty <tr>:

Note that would probably have to change CSS and/or JS each time you’ll add or remove a category.

edit : if you need only one or two additional empty elements, you don’t need to use JS to add a <tr>, you can also use a :after and/or :before like this:

.category-list tbody:after {
    width: 1px;
    content: "";
}

It adds a 1px empty element which works the same.

[loginerror (Maciej Kuźmicz)]

Thanks, it worked out quite okay We don’t mind having to micromanage the categories, so it is all good.
End result can be seen on our Forum.

[Canapin (Coin-coin le Canapin)]

Can you share your forum url?

[loginerror (Maciej Kuźmicz)]

@Canapin

forum url

Sure, I have it in my profile and I didn’t want to directly advertise

UiPath Community Forum