Sign Up / Login popup - width issue

Hello all,

I’m trying to make adjustments to the sign up / login popup (reusable element), but I’m a bit stumped.

I adjust the width of the popup but it stays exactly the same in my live build. Here’s an image of the editor (600px width): http://imgur.com/a/y15dS

And the live build: http://imgur.com/a/lUQ23

Any ideas?

Thanks!

Can you share a link to your editor so we can take a look?

1 Like

Sure, how do I share a link to my editor?

Edit: Looks like it’s literally a link to my editor, not a special share link. Here it is:

Thanks

Just to check: Have you pushed the changes to your live version?

I’ve only worked in the development version so far. When I click ‘preview’, the popup width is exactly the same every time. Very confusing as I’m sure I’m missing something simple!

Ok, so here’s what was happening. In the reusable element, there was a hidden group that showed up on the right of the workspace. That group prevents the entire element from getting any smaller. What I did was show that group, then move it to the left, then shrunk the entire thing. Take a look and see if that’s behaving as you want it to now.

What’s the hidden group called and how I can reveal it? Can’t seem to find any hidden groups to the right of the workspace at the moment!

I had already moved it. I put it back the way it was originally, and took this picture:


On the left of the editor, you see a section called “Elements tree.” This is where you can see everything on the page. Inside the Elements tree is a group called Group Log in. This is the group that’s hidden by default, and is located on the right. I’ll leave it the way it is for now, and you can change it how you see fit!

I think this has confused me more to be honest –

The difference I see is that the Signup / Login Popup group is now wider in the editor, and the login popup has been moved to the right, and when I view the popups in preview mode now, there’s a space below the signup popup and a big one above the login popup. Eek!

Designing in Bubble has been pretty intuitive so far, but this is definitely the least intuitive aspect I’ve experienced.

Do the signup and login popups need to be the same width as they’re a reusable element? If so, that’s OK, but I’m going to be creating a design like this: http://imgur.com/a/OvC8z

Hope you can help clear up some of my confusion!

PS: With the link I provided, can anyone just go and edit my project?

Yes, the link you provided lets other people edit your project. That’s the best way to get help on the forums, it’s like showing other people your code snippets on Stack Overflow.

The reusable element has 3 groups inside of it: Sign up, Login, and Reset Password. When the element is loaded, only one of those groups is visible (Sign up). That’s why when you go to edit the Reusable element, there’s a giant empty white space to the right. In that space, that’s where the hidden group (Log in) is located. Does that part make sense?

Yup, the part of the space on the right makes sense - and I know that I can hide/reveal elements in the elements tree area. So far it makes sense!

Ok cool. So in this case, to make it 600px AND look good, I think all you have to do is move the hidden group to left, then shrink the size of the entire reusable element in the editor.

I’ve done this but seem to be at exactly the same place I started? How can I change the width of the actual popup in preview (and make it longer so that there’s a white backing behind all the fields + sign up button?

Oh, ok, I misunderstood ya. You have to go into the reusable element for Header. Inside there, you can show “Signup/Login Popup A” and adjust the size there. That should do the trick!

Hmm, I’ve tried resizing it but it never seems to change the size of the popup.

I can’t test it, as it says there are 2 errors and won’t let me click the Preview button. Can you fix those real quick?

1 Like

Done!

I see what you’re doing here. You’re using the same reusable element in 2 different popups. I get it now. The element size is always going to be based off the largest group, even if it’s hidden. Without splitting out the login and signup stuff, I’m not sure how you are going to fix the extra space issue in the Login popup you have.

2 Likes

Ah ok, thanks for the help! I can make the login + signup popups the same sizes, the login popup will just end up having more whitespace.

Strangely, when I preview the popups now, they’re much wider – did you make a change? If so, that’s what I was looking for!

It gets a little confusing, but here’s what I did.

  • The reusable element for signup/login is NOT the same thing as the popup that actually appears on the page.
  • In the Header reusable element there is a Popup. Inside that popup, that’s where the reusable element for signup/login goes
  • I went to the Header reusable element, and made the Popup visible. I changed the size of the popup directly.
2 Likes