Display a Collection list as horizontally and comma separated

Design help General
1

I’m looking to display a collection list consisting of blog post tags as a simple text field separated by commas (see screenshot below).

25%20PM
25%20PM1414×194 23.1 KB

This would display on a single blog post page and list out the associated tags. I see that you can lay them out as columns or assign different display properties, but is it possible to separate by a comma like in my screenshot?

2

Separate ==> Very easy (Add “inline-block” comma (and space) after the category name inside the collection (Also inline -or- inline-block element) - The only problem her is with the “last” “unwanted” comma.

I can give you solution by custom code maybe (Remove the last comma by Javascript).

3

Hi - Thanks for your help on this. I was able to get the categories laid out like to described using the inline-block display property on the collection list. What javascript do you recommend using to remove the last comma and space?

4

Nevermind, I was able to accomplish this using only css pseudo elements to place the comma and space.

5

Hi! I’m running into this same issue - would you be so kind to share your read only site or a screenshot of what you did?

Thank you!!

6

Hey Valeria - Happy to help, would you be able to share your project and I’ll see if I can recommend the solution I went with?

7

Ahh you’re the MVP!

I’m running onto this issue in the “footer” of the Atlas template pages

https://preview.webflow.com/preview/la-palomera?utm_medium=preview_link&utm_source=designer&utm_content=la-palomera&preview=820ef944dd9386e588849dcc7ce36b6d&pageId=5f7f2af44548987b6d944aeb&mode=preview

image
image1214×387 23.8 KB

Screenshot 01 - annotated
Screenshot 01 - annotated912×291 33.1 KB

Thank you so much!

8

Okay - Try this.

  1. Set your .footer-collection-list to display:block
  2. Set your .footer-collection-item to display:inline-block
  3. Place this as custom code css:
    .footer-text:after { content: ","; } .footer-collection-wrapper .w-dyn-items .footer-collection-item:last-child .footer-text:after { content: ""; }

Let me know if that works for you.

1 Like
9

@stau5 Thank you for sharing this! For anyone else hoping to do this, what worked for me was:

.collection-item:after { 
	content: " • "; 
}

.collection-item:last-child:after {
	content: "";
}

I wanted a bullet point as the divider in this case. I also had to set the line breaking on the collection-item to “pre” so that it wouldn’t remove the space after the bullet point.

3 Likes
10

It worked so well! thank you so much!! :slight_smile:

11

great, had same issue in few projects and a great solution, the webflow new feature to style items differently does not do this simple thing

12

How did you lay out your categories inline? I’ve set the display of my Collection list to inline or inline-block however it still displays in a grid. Link here

13

I am trying to do this for my blog (share → Webflow - Footy Talking Points - AFL Analysis)

For my collection, I have written the code: .tag-text:after { content: “,”; } .tag-collection-wrapper .w-dyn-items .tag-collection-item:last-child .tag-text:after { content: “”; }

However, it doesn’t seem to be working. Would you be able to help me out?

Thanks

15

Hey Jim,

Could you also send me a published link to this page so I can take a look?