# Only some DVL components respond to clicks

**URL:** <https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540>\
**Category:** Questions about Thunkable X\
**Tags:** data-viewer\
**Created:** [April 20, 2023, 2:58pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540 "2023-04-20T14:58:31Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 20, 2023, 2:58pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/1 "2023-04-20T14:58:31Z")

</div>

Is there some workaround or fix for the fact that when I click on some of the components in a custom DVL (data viewer list) layout, they don’t respond?

I’m creating a pop-up menu like this:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/4/54f277cd445bc9e7d88fd3313965dda5d8b59250.png)

The layout is a container containing from left to right: an image, a label, and a button. If I preview it and click on the label, it registers the click event with this block:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/e/debed60e8201da01ca2432f50f7186749926ed9c.png)

But if I click on the image or button, it does not.

I’ve created a bug report here: [Clicking any component in a custom data viewer layout should trigger an item click event · Issue #1264 · thunkable/thunkable-issues · GitHub](https://github.com/thunkable/thunkable-issues/issues/1264)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 20, 2023, 8:03pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/2 "2023-04-20T20:03:41Z")

</div>

I’ve also tried cloning a group to create a pop-up menu and although I can determine which group (row in the menu) was clicked, it doesn’t work reliably for the same reason… components in the group prevent clicks from “going through” to the group and therefore are not detected consistently.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 21, 2023, 11:28am UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/3 "2023-04-21T11:28:12Z")

</div>

> [@tatiang](#):
>
> components in the group prevent clicks from “going through” to the group and therefore are not detected consistently.

That is true if the group is behind the components. However, if you place a **pseudo group** on top of the components then it will be the one receiving the click.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 21, 2023, 2:09pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/4 "2023-04-21T14:09:10Z")

</div>

I thought of that as well. I guess I don’t know how to do that. I don’t see a way to layer groups. Do you have an example of that in DnD?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 21, 2023, 5:31pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/5 "2023-04-21T17:31:03Z")

</div>

The trick is in the `component tree` the component that will receive the click is the higher component in the tree.

Just make sure the label or the group is higher in the component tree from those component beneath it in the screen.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 21, 2023, 6:42pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/6 "2023-04-21T18:42:15Z")

</div>

I was able to get it to work with stacked Groups. Thank you for that suggestion! I don’t know why I had such a problem figuring out how to do that before. I guess a good night’s sleep helped! 🙂

What I ended up doing is creating a group containing an image, label and button and then an empty group which I placed on top of that group on the screen but above it in the component tree. I clone both groups where I need them and then use Any Component blocks to determine which group was clicked:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/9/092e83ae36f7a881f340f4b2f57aa88e5951ab47.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 21, 2023, 6:43pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/7 "2023-04-21T18:43:14Z")

</div>

I’d still like to be able to do the same with a DVL…

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 21, 2023, 7:40pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/8 "2023-04-21T19:40:33Z")

</div>

It should be the same with DVL but if you are using the StP editor then you need to use fixed position components and you need to access the advanced properties and set the z-index to a high number to be on top of other components in the row/column.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 21, 2023, 9:32pm UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/9 "2023-04-21T21:32:07Z")

</div>

No, I’m using DnD. So I don’t see a way to layer Containers within a Layout. That is, I can’t see a way to drag one container on top of the other within the layout screen. I don’t mean the component tree.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 22, 2023, 2:05am UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/10 "2023-04-22T02:05:19Z")

</div>

> [@tatiang](#):
>
> So I don’t see a way to layer Containers within a Layout.

You’re right. This option is not available in the `Layout` component in DnD. I tried to add buttons on top of each other in the `container` but there is no property to do that.

However, If you start with a `Group` outside of the container and layout and have the components inside the group stacked on top of each other then **drag the group into the container** you will notice that the design will show that the components inside the group has been rearranged to fit the style of the container **BUT** when you test it (I tried web test only) the components inside the group will show in the screen the way they were positioned in the group before being dragged in the container.

I guess this is a bug so you can’t rely on it as a solution.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [July 21, 2023, 2:05am UTC](https://community.thunkable.com/t/only-some-dvl-components-respond-to-clicks/2382540/11 "2023-07-21T02:05:23Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
