Uneven layout of subcategories

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: categories, grid, Subcategories, uneven

Author

Posts
July 28, 2016 at 10:41 pm #235471

Ray Scarpa
Expired Member

Post count: 84

Hi – Wondering if there is some way to make the categories and subcategories display more evenly when there are more in one area than another? It would seem like some kind of masonry grid layout would help but don’t know if that’s possible.

We reviewed this forum post and tried the suggested CSS but it only seemed to make it worse. Perhaps if you could clarify how the % reference applies, we could modify to fit our situation better?

Also, even without that code, it looks like one of our categories (Marketing, see screen shot) seems to tuck into a column where it does not belong. Although this is an anomaly, maybe it suggests a solution since it is creating a masonry grid by accident?

Willing to try any suggestions.

Thanks so much!

July 29, 2016 at 9:10 am #235697

Kor
Moderator

Post count: 16516

Hi Ray Scarpa,

Unfortunately, that isn’t something that currently possible to achieve out of the box. Also, the custom CSS needed for the adjustment would be a bit complex which falls outside the scope of what we offer for support.

Thanks!

July 29, 2016 at 3:47 pm #235963
Paolo
Site Admin

Post count: 31211
The marketing cat is going where it is, because of the length of the previous 2…

You can use this css to prevent that:
```
.gd-cptcat-ul.gd-cptcat-parent.gd-cpt-flat:nth-of-type(9) {
    clear: left;
}
```
Thanks
July 29, 2016 at 5:44 pm #236181

Ray Scarpa
Expired Member

Post count: 84

Thanks for checking on this. If you could give just a bit of detail about how the above css applies to fixing the marketing category, maybe we could reverse engineer or adjust the others to adapt? Is that affecting the length of each column of subcategories or the distance of parent categories from the subs above?

July 29, 2016 at 8:02 pm #236294

Paolo
Site Admin

Post count: 31211

Hi,

the marketing column is going where it goes because the last category of the previous row Home Improvements has less items then the one before Health and Welness, leaving enough spece for the marketing category to float under home improvements.

The CSS I gave you clear the space on the left of the Marketing category only.

There is no way to create a masonry grid with only css for that widget. You could probably achieve something with JS, or you would have to rewrite the entire output of the widget.

Thanks
Author

Posts