Is there a way to detect a click in a cloned Group or Container using Layouts (beta)?

Edit: Okay, I did figure out that I can clone a group within a layout. So that will work. I just don’t understand why a group can be created within a screen but not cloned within a screen. But I guess that answer is to just use a layout instead of the screen when selecting the clone destination.

Edit #2: I did figure out that I can clone a container that has a button inside with width and height filling the container. The button is transparent and at the top level of the component tree. But when I detect a click using an Any Button Click block, it only works if there is nothing underneath the button. Once I add a label, for example, under the button, the click is not detected by the button when I click in the area of the label. (Bug report: Button click detection fails when underlying components exist · Issue #1183 · thunkable/thunkable-issues · GitHub)

— start of rant —

But uh… groups don’t have margin or padding settings. So nevermind! Why can’t components ALL have the same properties available?! It’s like I have to do trial and error for hours until I can figure out which mix of things will do what I want when it’s pretty straightforward to just assume I can clone a group and click on it. But I can’t. Or I guess I can but it will look terrible. All this to avoid DVL limitations (not being able to sync to a cloud database directly).

And I can’t put a group in a container otherwise I could use the group’s click event and the container’s padding/margin settings. But nope!

— end of rant —

I’ve decided to use clone blocks to create a “DVL” effect. And I’d like the user to be able to click on a “row” of the DVL. I know I can detect clicks in cloned components such as buttons but for the effect to be good, I want the entire container/group to be clickable.

The problems I’m running into:

  1. Containers do not have click events associated with them within Any Component blocks.

  2. Groups cannot be cloned within a screen.

These are the two ways I’ve tried to set up a container/group that can be cloned and clicked:

1 Like

I think I solved this by detecting a button click and label click in a cloned container:

It’s not pretty but it works.

2 Likes

This is exactly what I do! Not elegant, a bit convoluted in fact, but it works.

1 Like

Hmm… detecting a label’s click only works when I click on the text, not when I click on the blank area of the label component where there is no text.

I was hoping to use a button to overlap the other components but that doesn’t work or at least I can’t figure out how to layer components in a Container.

How do you usually set this up? Maybe I just need to use buttons instead of labels. Oh but then I can’t left justify the text in the button. :cry:

1 Like

I did create a workaround for a label’s blank area not detecting a click. I just “pad” the end of the label with spaces*. See the sections highlighted in yellow:

That way, the entire width of the label/container is “clickable.”

*Actually, spaces do not work. But non-breaking spaces do work (option+space).

2 Likes