Changing height for sign-up / login pop up

Hello there!

Im having an issue. Using the signup login template that comes with the app, I’ve added few fields

and the thing is that those fields needed extra height. But, when it’s just the login group for the reusable element, it stays that size.

Is there any way to reduce the size of the popup when logging in? different to the sign up pop up size?


thanks

1 Like

I had trouble with this login / sign up template as well, so I ended up just creating new login and sign up pages (separate from one another) and rebuilt the workflows. Didn’t take long at all and haven’t run into this problem since!

You have to change both the height of the “popup” element(s) within the reusable element as well as the height of the Sign In / Login Popup on each page where you’re using it.

@jordan.shotwell but how did you manage the workflow flor sign up login? I tried the way you are sayin but I faced another problem. Once deleted, the sign up login, I can’t find the new ones created by myself as I describe in this post

basically, it doesnt recognizes the new reusable element

@sridharan.s the group containing the Log in (that is the group that doesnt uses the full size of the pop up) is already shorter!

Any screenshots of that problem? Sounds like you deleted the element from the page but it’s still saved as a reusable element in the app. I would ensure in the Pages dropdown at the top that the old reusable element is deleted. Otherwise, you may be selecting the old sign up button instead of the new one.

You can put a group that collapses height on the version you want short. Make sure it’s set to collapse when not visible and then make it not visible.

@jordan.shotwell here is the popup created by me

[
but when in look for it in worplaces, it doesnt shows up

@sridharan.s how can i do that?

here is the app default sign in - log in pop up with the extra field inputs that I have created


And when I click in the “log in” element group, I see this

How can I make the pop up adjust when I’m seeing only the “log in” group to this new height?

  1. Make the login group as long as the sign up group.
  2. On login group, below “don’t have an account?” add a group.
  3. Set that group to collapse height (it’s a check-box within the edit / settings for the group)
  4. Set the group to be not visible.

Then, when you view the reusable group you should see that the height of that login group is now shorter because that group’s height is collapsed which eliminates the extra space.

1 Like

It’s not working. Im having this problem

And now checking, I’ve noticed it’s short for the “sign up” state

So annoying there isn’t any post addressing this specifically

Well, there’s going to be one for the next person after you because we’re going to get this.

Here’s how to do it. Same steps as before but 1 important caveat that I forgot (my apologies) - put the collapsible group outside of the other groups (for some reason collapsible groups within other groups doesn’t seem to work).

As such, the group that’s collapsible should be below the group with the content like this:

1 Like

@sridharan.s great!!! problem 1 solved!!! :slightly_smiling_face:

Now… There is a new probelm… :frowning:

How I fix that?

If you look at my example image, you’ll notice that I have the collapsible group set to be visible when the other view (e.g., when the view is “sign-up”). Did you try something similar?

1 Like

@sridharan.s finally did it!

final question now is to know if this could affect responsiveness for mobile devices!

Awesome!

It shouldn’t affect responsiveness because it’s all vertical changes (not horizontal). One way to check is to go to the responsive tab in Bubble and see what it looks like in different widths.

I find it helpful to do a quick check on all of the elements / groups to see which ones are fixed width and which ones aren’t – I often find I want to toggle one or two to a different state and then check the responsiveness.

Congrats on getting this working in your app!

2 Likes

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