Change Group Width depending on number of list elements

I have a repeating group and inside each cell are a number of elements. One of those elements displays a number of icons. Those icons are determined by the content of a list of Things on the db table for that record. So if there are two items in the list I want the group to be just long enough for those two icons. If there are 10 items I want it for be long enough for the ten icons.

In effect, I want to change a Group’s width dynamically. I have used CSS Tools in the past so looked at using that but it runs in a Workflow so I can’t see a way to make it run for each cell in the RG. I’m not even sure that is a wise, or even a possible, way to go about it.

Short of having 21 separate groups (size ranges from 0 to 20) and having conditionals display the correct one (I hate duplication) is there a smarter way to do this?

I’m not quite sure I understand what your UI looks like or your goals with the icons. That said, couldn’t you put them into individual groups and add conditions to each group to show/hide the group based on the number of elements in the database? Would that solve your problem?

1 Like

This sounds like an RG inside of an RG. Get your second level things in a list, display in an RG with full list set and style as needed.

1 Like

Nice try guys but no dice. @sridharan.s the group has special formatting so having multiple will look wrong (I’m building to a signed off UI) otherwise this was a simple solution. @keith I started with a horizontal RG of icons inside the vertical RG but when I’m scrolling in FireFox the screen keeps sticking and then horizontal scrollbars appear even though I’ve used CSS to hide them. Right now I’ve made the group the full width (long enough to hold 20 icons) and I fear they will have to be happy with that or I will need to do 20 separate groups depending on the list count.

Ah, I see. Well, you went about trying the right way… I don’t quite get the horiz scrollbar Issue you’re running into, however, another thing to keep in mind: when you construct that second level list, note that you could pad it with spacer items.

Construct a list of 19 or 20 icon things that are unique but essentially blank. Then merge that list with your (I’m just going to call them “icons”) icons list. In this way your number of items will always be more than 20.

Send that list:items thru 20 to that RG.

(The above is just random idea which may or may not be helpful to you!)

1 Like

This is what that inner list of icons looks like.

21

I think I am going to make 3 or 4 group and just pick the most appropriate depending on the number of items in the list and on the orientation of the screen. It’s slightly more acceptable to my pre-disposition than having 20 groups :wink: