Display Custom Fields as separate Boxes / Buttons instead of the default comma separated values

How To
1

Hello Everyone!

I am using pods custom fields ( multi select ) for the dynamic data. -
How can I can display the output as separate boxes (like buttons) instead of the usual comma separated value?

Snag_cee4a9
Snag_cee4a91216Ă—1061 202 KB

how can this be done? need some help :smiling_face_with_tear:

Thanks in advance! Appreciate it !
JamieZ

2

Again another unanswered question. This sucks! I need to know how to do this.

3

problem is those texts are saved as text strings. they don’t have any tag with them
if they came with tags like maybe;

<b>text</b>,
<b>text</b>,
<b>text</b>

something like this it would be possible to select them with CSS give padding background whatever would be very easy. one way to solve this is save the strings like that with simple HTML tags.

or manipulate and re-render with js. here this find the .custom-field-text class checks if there is texts with commas inside it and add htm ltags to it. and than you can write simple custom CSS.

document.addEventListener('DOMContentLoaded', function () {
    // Select the element with the class .custom-field-text
    var element = document.querySelector('.custom-field-text');

    // Check if the element exists to avoid errors
    if (element) {
        // Split the text content by commas
        var texts = element.textContent.split(',');

        // Wrap each text piece with <b> tags and join them back into a string
        var boldTexts = texts.map(text => `<b>${text}</b>`).join('');

        // Update the HTML content of the original element
        element.innerHTML = boldTexts;
    }
});

CSS example for this

4

This is a “solution” I ended up doing the exact thing. Using .split and then turning those into their own tags. But I wish there was a better solution, especially for any of the non coders out there.

6

Hey! Maybe this can help