How do I get groups to stack on top of each other?

bchillingworth · 2024-11-16T20:18:58.954Z

I want to create a signup process where a user will click sign up, the sign up form will disappear, and the text “check your inbox fro confirmation” will appear. This seems really easy, but I’m struggling with such a stupid part of this which is that when I try to put the text on top of where the form is it just drags the text into the form group and messes up my formatting.

I’m sure this is a simple button I have to press or something for this to not happen… any advice would be really helpful!

senecadatabase · 2024-11-16T23:41:44.114Z

This is really just a simple matter of hiding and showing groups.

Let’s say you have a group ‘sign up’ where the user signs up.

You then add another group under that called ‘verify’ or whatever you want to call it…and add a text element with whatever you want to say.

When the user clicks the sign up button you have a workflow.

In the workflow, you sign the user up and then add another action to hide the signup group and another action to show the verify group.

Added: Your ‘sign up’ group would be visible on page load and collapsed when hidden. Your ‘verify’ group would not be visible on page load and collapsed when hidden.

bchillingworth · 2024-11-17T00:18:49.000Z

Thanks for the response! I don’t need help with the workflow, that part is easy. The problem is getting the confirmation text to be where the signup form is without it becoming part of the same group and messing up the formatting.

senecadatabase · 2024-11-17T01:15:13.665Z

If you follow the instructions I gave you it will work.

bchillingworth · 2024-11-17T01:34:01.000Z

I tried that, but unfortunately it doesn’t work. I hid the group with the form, and when I create the text and drag it to the middle of the page where I’d like it the text automatically goes somewhere into the group with the form even though it’s hidden.

senecadatabase · 2024-11-17T01:38:11.091Z

You need to put the text into its own group.

You can call it group ‘verify’ or whatever you want.

You need to have a separate group for your text.

Then, you hide and show the groups as I mentioned.

bchillingworth · 2024-11-17T01:51:15.000Z

I have done that, the exact same thing happens. It just takes the element that I am dragging and puts it right into the hidden group that is my sign up form.

senecadatabase · 2024-11-17T01:53:23.722Z

What do you mean by dragging?

I will modify my sign up form to show you it works like I’ve said.

I’ll upload a video tomorrow because I have other things going on tonight.

bchillingworth · 2024-11-17T13:45:51.000Z

By dragging I just mean moving an element to where I want it to go. I made a video that illustrates the problem that I’m having:

https://www.loom.com/share/cdcc3fe3079747b4a10ab5b13c23ac8e?sid=dd03f45b-1a42-48ac-a92d-b7279685161a

GH5T · 2024-11-17T13:54:16.840Z

This is simple. Use align to parent. Make two groups inside of it, 1 group your first section you want to be visible on load, and the 2nd will be hidden until you make it visible.

On your “next” action, just animate the visible one hidden (fade out) and animate in the hidden element (fade in).

Make sure the hidden element (one you want visible) is on top. You can do so by right-clicking the element and clicking “Bring to Front”.

When you do that, the element will get pushed to the bottom of the group. That is intended. The last item in your groups always has the layer precedence.

Hope that helps!

bchillingworth · 2024-11-17T14:13:29.021Z

Thanks for the response, but I am still unable to do what I want. I made another recording of what happens when I use align to parent. Now the groups will just swap places and I end up with the text being either well above or well below where I want it to be.

adamhholmes · 2024-11-17T14:17:34.854Z

What exactly are you trying to do here?

You want the ‘check your email text’ to appear overlayed on top of the elements behind it?

Or you want just one or the other to be visible at any one time?

bchillingworth · 2024-11-17T14:29:03.835Z

I’m going to create a workflow so that when a user clicks “sign up” the form disappears and the confirmation text appears. The workflow part is easy, getting the text where I want is the part that I can’t for the life of me figure out how to do.

adamhholmes · 2024-11-17T14:33:18.938Z

But why do you want it in the same container as the main part of the form, if you’ll be hiding the form?

Either put it in the same container, but obviously don’t hide it, or put it below it (that’s how you do it).

bchillingworth · 2024-11-17T14:46:26.000Z

I don’t care what container it’s in, I just want the form to disappear when someone signs up and the confirmation text to appear. That’s it.

adamhholmes · 2024-11-17T14:54:02.913Z

So which part of that are you having trouble with? (it’s not clear from your question or your videos).

But in any case, if the ‘check email text’ is inside the container you’re hiding then obviously that will also be hidden.

As I said, you need to put the check email text OUTSIDE of the container you’re hiding (not inside it, which is what you appear to be doing).

So, in the editor, that means below it (or above it), but NOT on top of it.

bchillingworth · 2024-11-17T15:11:55.000Z

I want the text to be in the same exact location as the form. When someone clicks sign up the form disappears, and the text appears. I cannot figure out how to get the text to go where I want it to.

I get that the text needs to not be in the same container. I cannot figure out how to get the text to be outside of the container I am hiding but in the same location as the container I am hiding.

Does that make sense?

adamhholmes · 2024-11-17T15:13:45.932Z

You need to use layout settings to control where it appears on the screen.

senecadatabase · 2024-11-17T15:14:31.726Z

Was going to upload a video on this, but I see someone else gave you a good answer.

I wish you all the best for your app.