How do I bring objects to the front when inside a repeating group?

[julpereira82]

I really hope this is possible. Is there a way to let users bring an element to front when it’s in a repeating group?

I have a repeating group where different objects are created and can be dragged around. The problem is sometimes when adding a new element, it gets added under another one, sometimes leaving it completely hidden, and you have to drag things out of the way to find the one you just added. This is very counter intuitive of course.

Ex: The second image (newly added) is cut off because it’s under a previously added image here:

Sometimes, if it the objects are small enough, they get completely hidden and you can’t even tell you just added something… which is kind of awful. To me, I know this, and I can dig around until I find it somewhere (not ideal) but my users may get confused and/or annoyed eventually. Any ideas? I don’t really know how to even research this concept to be honest.

The idea and most natural way would be that new objects are simply added on top of course. But there doesn’t seem to be anything for this…

I tried to sort objects in the repeating group by cell number (assuming the latest ones added show up on top), and vice versa, but nothing. They still appear under objects.

It’s kind of random to be honest. No apparent pattern. Ex: I added 1 image. Next one I added appeared on top. All good so far. Then I stacked it in front the first one. I added a second one, and it showed up under the last one. Makes no sense!

Is there a consistent way I can bring elements to front when I create a new object in the repeating group?

[julpereira82]

Solved it never mind!

I simply had to use some CSS and work with the z-index of things.

[redremnant09]

and howd u do that? im having the same issue any tips?

[julpereira82]

Should be a fairly simple set up.

1. First, make sure you have IDs enabled for all objects in your app if you don’t already have it. This is in the settings, there should be an option to display element IDs.

2. Now, add an ID to each of your elements that you want to bring back or front. You can use the unique ID of whatever thing you have as the easiest way to do it. So right here, put your ID:
   

   

3. Now, almost done… Add an HTML element in each cell of your repeating group where you want to target elements. Then, in the HTML element enter css:
   <style> #yourelementidhere { z-index: 1 !important; } </style>

Or, in the event you’re using uniqueID from your Thing as I suggested to target the element with the given css (yes, you can also enter dynamic data inside this code too)…

<style> #current cell's thing's unique id { z-index: 1 !important; } </style>

For small context, a z-index is just like an x or y coordinate in another direction. So same way you can move things up/down or left/right with coordinates, you can bring them front/back with z “coordinate” or better said, z-index.

That’s it. The bigger the z-index, the more in front things will show. You can try many ways to do figure out which number to use for your z-index depending what you’re doing. For example, an easy way and straight forward way is that you can make the z-index your current cell’s index, which will make the last added things of the repeating group come out in front. That would look like this:

<style> #current cell's thing's unique id { z-index: current cell's index !important; } </style> (you know, since each cell has an index number… this is a simple order)

Or however else you choose. You can also try it by adding a new field to your repeating group Thing, let’s say “Placement” of type “number”… and then just make changes to each thing so it makes sense. If Thing in cell 1 has a Placement of 1, and Thing in cell 2 has a Placement of 2, then thing 2 will come out in front:

<style> #current cell's unique id { z-index: current cell's Placement !important; } </style>

Viola! Bubble and CSS goes a long way hope this helped.

[julpereira82]

Tagging you since I apparently didn’t…

[redremnant09]

appriciate the help although it still doesnt work for me. i made an id and put it into the text, should i be putting it into the RG?
still when i do :plusitem and add a text into the list it doesnt go to the top.

showing the text goes down still .

dont mean to be a nuiscense but id really like to understand how to do this for my RG.
thank you for your help !

[julpereira82]

Sorry for taking a bit to respond. I think the issue here is you’re not using a dynamic ID or a dynamic z-index. So rather than use rtg3 as the id in both your HTML element and your target element (and no, you don’t and probably shouldn’t add this same id to your repeating group), you need to add a dynamic part after like: “rtg3current cell’s unique id”. You can and should add dynamic data both in the ID field on the target element itself, and insde your HTML element. Why dynamic? So that you can target everything individually, and not just have e.g. the html on cell 1 target every single element the same of your repeating group which won’t work since if you’re making a z-index of 2, every single thing will be on 2 and you want levels instead.

So just add “current cell’s text’s unique id” (every element on bubble has an unique id) inside your IDs and it should work, since each thing inside your repeating group has a different unique id which bubble does automatically every time you create a thing (not sure how much you know).

Second, you also have to make the z-index dynamic. So instead of 1, change it to either “current cell’s index” (this gives you the number cell this is), if you want latest objects added to come up on top (e.g. cell 1 comes below a thing from cell 20). Or, change it to “current cell’s place” if you want to add a field to your element of type number that you can change from your database yourself (like in the event you wanted to let the element be brought back and forth)/make changes to current cell’s thing +1 or -1 to bring things front and back. So if you made a change to your thing in cell #2 for its place to be 5, then it’d come up on top of every thing in the repeating group whose place is under 5.

In other words; make your id dynamic and make your z-index dynamic.