Output collection list as comma separated list

I found some similar posts, but it seems each author had already figured out something I have not.

I have created a collection of “Services” for a portfolio. I have added a Collection List element for each project which will list the services included in that project.

I would like the services to be output as “Visual Identity, Web Design, Web Development” rather than the column structure I seem to be able to get by default.

From what I understand from the other threads, this involves solving 3 small problems.

  1. I need to “collapse” the column structure so that the Services each appear right up against each other.

  2. I need to add a comma and a space between elements.

  3. I need to repress the comma and space after the final element.

There seem to be multiple ways to solve the second and third, but I am still stuck on the first.

Any help would be greatly appreciated!

Thank you so much

William


Here is my site Read-Only: LINK

The first two points are easy.
Set the following setting to the Collection Item:

  1. Display = Flex, Align = End (bottom)
  2. Padding (right only) = 5px (remove 10px default left padding)
  3. Width = AUTO (override default)

Add another text block to the Collection Item and write “,”

This should do the trick.

Removing the “,” from the last item will require some custom code.

1 Like

You can also create the commas using CSS.

Suppose your collection list has a class of My Collection;
You can drop in an HTML embed with this style;

<style>
.my-collection .w-dyn-item:not(:last-child) p::after {
  content: ", ";
}
</style>

This will append a comma after each paragraph, except the last one.

Also, I’ve found flex has issues when the screen width gets too small, the content gets chunky with its wrapping. You may have better luck setting the Collection Item and the inner text element to a layout of inline.

image

Codepen of the CSS here;

1 Like

I am new to Webflow @memetican Could you please tell me where I go to add the HTML with that CSS snippet for the commas?

Hey William, anywhere on your page, just drop an HTML Embed, and paste that code it.
If you want it on multiple pages, it’s bet to put into your navigation symbol or your footer symbol, which you’ll have throughout your site.

The reason to put it on the page in an HTML Embed, rather than pasting it into your Site Custom Code, is that in an HTML Embed the designer will display it. That lets you see what it will look like while you’re working on it.