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.
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!
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?
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!
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.