Listing all elements in a single cell in a repeating group?

Need help
1

Hello all!

I am building an application describing jobs and skills. Each job has a list of skills, which I defined in option sets. I want to build an RG that lists all the skills for a given job in the same cell (in-line, one after the other), rather than by rows and columns. Here is the targeted design:
Capture d’écran 2022-01-25 à 12.03.22

Here is what I have tried, using a 1 by 1 RG:

Capture d’écran 2022-01-25 à 12.00.42
Capture d’écran 2022-01-25 à 12.00.42675×546 62.1 KB

How may I do it? Thanks in advance!

cc @boston85719 if you see this!

2

Hi there, @jonathan.pinet… someone had the same question (or at least a very similar one) a few days ago, and that thread resurfaced another thread that you might want to check out.

Hope this helps.

Best…
Mike

3

Hi @jonathan.pinet,

If you’re using the new layout engine (new responsive engine), there’s also this approach, which involves a simple CSS tweak to a regular RG. Here’s the result.

In your case, the “tag cloud” RG would be nested within a cell of your main RG. In that case, you’d need to tweak the CSS to target the inner RG properly. If you need a working example of that, let me know.

-Steve

1 Like
4

Thanks a lot @mikeloc and @sudsy ! It looks like what I’m trying to build. I will try to do it and let you know if I can’t.

Cheers

5

Hi again @sudsy, thanks for sharing the ressource. I implemented on my page and it seems to work well, except that items are not wrapping when reducing the page width (an horizontal scrollbar appears, which I don’t want).
See my list:
Capture d’écran 2022-01-25 à 14.20.20
and your sample list:

Capture d’écran 2022-01-25 à 14.20.28
Capture d’écran 2022-01-25 à 14.20.28801×108 5.59 KB

The current CSS code is as follows:

#rg-cell-wrap { display: flex; flex-wrap: wrap; height: auto !important; min-height: auto !important; }

I’m not a CSS expert: is there anything I need to add to this snippet? or setting my containers with specific widths and heights?

Thanks in advance

6

A neat trick is to use a Multi Drop down set to just display only (input is disabled). That does a simple “tag cloud” effect.

3 Likes
7

Just to cover the bases, do you have the element id option enabled in your app settings? (Settings → General → Expose the option to add an ID attribute to HTML elements)

If you do that and assign the rg-cell-wrap ID to your main (outer) RG, then you’ll have to tweak the CSS to target the inner (nested) RG. I think something like the following should work…

#rg-cell-wrap .RepeatingGroup {
   display: flex;
   flex-wrap: wrap;
   height: auto !important;
   min-height: auto !important;
}

That should apply the CSS to the inner RG instead of the main RG. (Note that the rg-cell-wrap ID needs to be added to the outer RG. Don’t include the # symbol when you enter the ID into the property editor.)

Seems like @NigelG has an even simpler solution though. :+1:

EDIT

One final note… In my working example, the CSS is included in an HTML element which accompanies the RG. That’s done for ease of distribution. However, it should ideally be included at the page or app level of your app. You don’t want/need the CSS to be output in each cell.

-Steve

8

That’s what I was missing! It works now, thanks so much for your help @sudsy
Thanks also @NigelG - that’s a good trick to know for future instances!

9

Here is a link to my tutorial on how to do it in the old responsive engine

In the new responsive engine, I would follow the approach listed in this forum post as it doesn’t require HTML elements making it much easier to trigger workflows and conditionals when the tags/chips are clicked etc.

5 Likes
10

This topic was automatically closed after 70 days. New replies are no longer allowed.