Reusable Element Issue

Need help
1

I’m having an issue with my element structure.

I have a mobile navbar which is reusable. The navbar height is set to 80px. Inside the reusable element, I have a mobile menu hidden which has a height of 800px. The mobile menu is shown when the hamburger inside the mobile navbar is clicked.

My issue is, I have to put the reusable element to the front so when the mobile menu is opened it spans the full height of the mobile device in front of all other elements.

For some reason, even though the element is hidden and the current reusable element is 80px everything from the top of the view and 800px down isn’t clickable. Somehow the mobile menu is still on the screen but just not visible. This is creating a problem.

What’s a better way to handle this issue?

2

Put it inside a floating group

3

In the reusable element editor, make sure the size of the element is 80px. What tends to happen is the boundaries of the reusable element expand to include the whole thing, even the items that are hidden, so you have to manually set the boundaries back to where you want them.

4

Floating group did not help.

5

The element is set to 80px. I still can’t click anything on the screen.

23%20PM
23%20PM1293×657 51.2 KB

6

Just to clarify, I’m talking about in the reusable editor itself, not the page where you placed the header. It might be correct, it’s just always something I wanna check. If that’s not it, I’m out of ideas!

7

I just sent that height to 80px also. Still now working :frowning:

11%20PM
11%20PM1392×919 55 KB

8

Is there a hidden group somewhere on the page? I’ve had this issue before and all it was a hidden group.

9

There’s no hidden groups.

10

Maybe give us editor access, and we could investigate more.

1 Like
11

It’s a bug issue.

12

@samhouston1107 We’ll keep an eye out for your bug report. In the mean time, what do you see in the debugger when you hover over the non-clickable parts of the page. Click the light grey text called ‘show responsive settings’ under the ‘Inspect’ button and that will show you grids on the page to understand which groups/elements behave together.

1 Like
13

Let’s make this happen.

14

Can someone help?

15
16

Any ideas?

17

Hi @samhouston1107 :slight_smile: I think the issue is caused by the “Menu Open” element overlapping with the red header group here:

image
image1670×516 99 KB

If you move the Group Menu element down (beneath the red group), and set the Group Menu element to “Collapse this element’s height when hidden”, that should make sure the “Group Menu”'s height collapses whenever it is hidden, so you can click the other elements on the page. (Also making sure the reusable element’s height is 80 in the reusable element editor and on the page, as you have it now)

image
image1928×874 71.7 KB

Since the red group is above the blue group and would be shown at all times, you can
add a conditional statement which hides it when the Group Menu is visible:

image
image776×684 42 KB

And set it to collapse in height when the Group Menu element is visible:

image
image1918×1168 148 KB

I just recreated your setup here and it looks like everything is clickable when it needs to be, but let me know if not! :slight_smile:

Preview:

Editor:

1 Like
18

also next time you can make your app public for better diagnostics

19

This topic was automatically closed after 70 days. New replies are no longer allowed.