Dynamic Z-Index with CSS in Repeating Group?

kevin.hunt · 2024-07-05T19:32:05.287Z

Hi All,

I have been tasked with creating UI element that gives a notebook tab look and feel that will show and hide different sections. See image below.

image1113×120 4.59 KB

Now that I have sat down to try to build this, I am realizing that there is a whole bunch more going on here than I had thought as it is not enough to just make the selected cell’s group higher than the other tabs, you need to keep the other tabs overlapped in a relative order as well.

ChatGPT has given me a couple of suggestions but I cannot seem to get them to work. I get the impression that one should be able to create an ID Attribute for a group inside a repeating group cell that changes dynamically and that this would allow you to use some Custom CSS to dynamically change the CSS based on set states and avoid having to use Javascript.

Before I expend a lot of energy experimenting on ChatGPT proposals, can anyone tell me if there really is a way to do what I am trying to do?

I want to do this without a plugin, unless the plugin is open source (ie code is reviewable).

GH5T · 2024-07-05T20:12:47.400Z

Hi. I use my Toolkit plugin to achieve things like this (has a bunch of tools to make your app very dynamic). You just need some Javascript that will dynamically change the z-index based on the cell clicked.

Your tabs are a RG assuming, so each RG has an index.

Click the tab group (inside the RG) to open the properties, and assign it an ID based on the current index: tab-item-current cells index (or slug, name, id, whatever – just has to be unique).

Add a workflow for that group when it’s clicked.

In that workflow:

Action: Inject Javascript (Toolkit plugin)

const tab = `tab-item-${current cells index}`;
const tabEl = document.getElementById(tab);

tabEl.style.zIndex = 10

You’ll also need to apply logic for when it’s not clicked, to make the others go back to default. I’m sure you can figure that out with this original example.

kevin.hunt · 2024-08-02T15:54:27.983Z

@GH5T we decided to reduce the complexity of our design to ensure a faster roll out but I have checked out your plug in and am impressed. It is fantastic and clearly will do everything that I need. And it is open which is fantastic as not seeing what a plugin is doing is a complete non starter for me.

For others reading this, I did a full vetting of the code sources that @GH5T uses. I used services like VirusTotal and got no red flags. The code could change so everyone has to be responsible for doing this for themselves and after every update but my testing shows that checking this plug-in is totally worth the time it takes to do that sort of due diligence. I am not clear how much Bubble does this for us but I suspect that their process is less rigorous than getting on the Apple app store for example. When I get the time to fully try it out, I will leave a review.

GH5T · 2024-08-02T16:07:25.574Z

Thanks Kevin.

tmxl · 2025-01-04T01:10:44.873Z

Thanks @GH5T this worked nicely for my use case.

GH5T:

You’ll also need to apply logic for when it’s not clicked

For anyone wondering how to manage reverting all other cells to lower z-indices while also setting the current cell higher, here’s how I did it:

const tag = `tag-current cells unique id`;

const tagEl = document.getElementById(tag);

// Set the z-index of the clicked element
tagEl.style.zIndex = 9999;

// Revert z-index of all other elements
const allTags = document.querySelectorAll('[id^="tag-"]'); // Select all elements with IDs starting with "tag-"
allTags.forEach((el) => {
    if (el.id !== tag) {
        el.style.zIndex = 10; // Revert other elements to a lower z-index
    }
});