How to separate repeater field values by comma and keep on the same line?

[Stacy]

I’ve reviewed this post and managed to get my repeater fields to show, but I can’t for the life of me figure out how to make the results show on the same line and separated by commas.

Here’s a screen shot of the structure, include the content settings of the div, in case that’s helpful:

I am not very experienced at php/wordpress coding (come from low-code database development/Quickbase), so apologies if this is a basic wordpress kind of question, but I would really, really appreciate someone pointing me in the right direction.

[vacdk]

You can add multible dynamic tags in the dame text field.

See my {acf….}, {acf…} right here…

Is it that you want to do ?

[Stacy]

Thanks for the reply - not quite. Here’s a screen shot of the results with the repeater values highlighted.

English and Spanish are the field values in two repeater rows and I’m trying to get them to be showing like:

English, Spanish

Instead of being broken into two rows like they are now.

[yankiara]

Hi,

You need to wrap your query loop element inside a div and set horizontal direction for that wrapping div (and not the repeater itself), which will act as a container for your looped items.

The repeater itself is not a container, it represents the looped item and is rendered on frontend as a list of looped items without a container for the whole list.

So here you actually set each loop ITEM to horizontal (which, by the way, has no effect because there is only one element in them, so it is even harder to detect the issue!), but your items are not wrapped in a container and stack vertically like other elements (title…) in the main container.

Hope it makes sense, not that easy to explain

In short, you should have:

• div (direction horizontal, your list container)
• • div (the repeater, which is actually the repeated item container)
• • • text (your content)

As for the comas, you’ll need a bit of CSS, like:

.loop-item:not(:last-child) .text::after {
  display: inline;
  content: ", ";
}

(not tested, by memory… it will add a coma after every item text except the last one)

[Sridhar]

Hi Stacy,

Welcome to the forum!

Can you share a screenshot/export of your field group and a screenshot showing where it is populated with values? And, where’s the field group set to appear?

[Stacy]

Thank you @yankiara !!! Those two updates did the trick!

Here’s the exact CSS details - had to add the “white-space: pre” or the space wouldn’t show.

.loop-item:not(:last-child)::after {
  content: ", ";
  display: inline;
  white-space: pre;
}

Also, had to update the div’s style>layout>sizing>width to “auto” to prevent the results from being too spaced out (aka showing as % width of the container instead of looking like a list).

Here’s a screenshot for good measure.

Thanks again!

@Sridhar Thanks for the welcome - Here’s the screenshot of the ACF repeater rows inside a custom post type in case it’s still helpful:

^I realize it’s redundant to have both the taxonomy and language choice fields, but haven’t figured out yet how to customize the taxonomy fields’ links and not just link back to themselves. Found the solution on this forum somewhere earlier, just need to track it back down again.

[yankiara]

Glad I could help

Beware, though, you use a container element as your list container, but I think you should use a simple div for this.
Container is meant to be the section inner content’s container, from what I’ve understood so far.

Also note that in theme style, you can set div element’s width to auto, since most of the time we need it like that.

(@timmse, I think width auto should be default for div)

As for the taxonomy/field, my rule of thumb is: Do I need to group/filter by this criteria (in other words do I need archive pages)? Then I need a taxonomy. If not, I use a custom field.