Forum Academy Marketplace Showcase Pricing Features

[SOLVED] Group longer than page length - how to handle that

Need help Mobile
#1

I’m building an SPA (mobile size page). I have a top level group (page) that contains between 4 and 6 sub-groups, each of which contains a set of related input fields. Some of these sub-groups may be hidden depending on circumstances so I use responsive settings, and collapse when hidden, to make the next sub-group wrap into the hidden one’s place. So far so good.

On a laptop/desktop these sub-groups go to the previous line and array themselves across the screen 2 or 3 wide. However, on a mobile, they are one below another. The layout is fine but I only see the first two because of the group containing them being longer than the page length. I don’t want to make a very long page length for everything just because of this one page.

What’s the best way to handle this? Do I need to use a plug-in to extend the page length in this instance and shrink it later of is there something obvious I’m overlooking?

#2

I don’t quite understand the issue you’re running into here. Bubble will dynamically adjust page length for you as the screen width changes. Just ensure that your group does not run off the page in editing view. Sounds like you already know how to use “collapse when hidden”, etc.

You might want to explore the “Responsive” tab. This allows you to control how things adjust responsively. (Note: You may find yourself needing to group elements to get the specific behavior you desire on mobile.) Here’s where you find it:

image
image.png1538×1691 355 KB

#3

Basically, my point is that your group CAN’T be longer than the page. (If it’s running off of the page in edit view, I don’t think those parts will show.)

If you’re trying to create a page that never grows beyond a certain height you’ll have to handle that in the design view (use the responsive tab to check behavior as you go, I guess).

#4

Thank you @keith but it is page height, not width, I’m struggling with.

On mobile, the parent group is longer than the page height so the information is cut off and I’m reluctant to have a long page as standard. I’m experimenting with CSS Tools to see if I can get it to change the page length just for this instance. So far it’s not working for me but I expect the problem is something simple like the need to close and reopen my browser or something … at least I hope it is. It just feels like an unnecessary thing to have to do. I expected bubble to adjust page length on the fly.

#5

I am talking about page height (I said “length” above). Anyway, you say:

This makes me say, “Huh?” I’ve never seen that happen. You might need to post a link to your editor for folks to see what’s going on.

If the group in question is fully on the page in editing view, it should never get cut off. I’m at a loss for how one would intentionally or unintentionally make that happen, is the point…

#6

The group is off the page in edit view. It is longer than the page @keith. That is intentional. I want to keep a sort of standard page length throughout the app but one page needs to be longer. I don’t want to set the page height to the longest view because that leaves lots of white space on all the other views. I’m starting to see some results with the CSS Tools - not quite what I want yet but I think it might allow me to change page and group heights on the fly. At least it claims it can do that. I’ll keep at it, I was just surprised that there is not a more obvious bubble solution. Thought I was overcomplicating the issue but it seems a plugin is the only way to make it work.

#7

OK, well my advice would be don’t do that. I simply don’t get why you’d intentionally have something on the page that runs off the page. This does not make sense.

If you’re building a page where sometimes that group will be needed and sometimes it will not be needed, then make it hidden and “collapse when hidden”. Show it when you need it (using workflows or Conditions on the conditions tab for the group).

Do this little experiment for a moment:

  1. Adjust your page length so that this renegade group can fit.

  2. Make sure the group fits on the page. Bring the bottom of the page up either flush with or a couple pixels below the bottom of the group.

  3. In the settings for the group, unclick "this element is visible on page load"

    image
    image.png743×95 2.92 KB

  4. Also select “collapse height when hidden”

    image
    image.png757×79 3.41 KB

  5. Examine your page in preview/run mode. You will see that the group is not visible and any empty space it would take up is collapsed.

  6. Now back in edit mode, CHECK the box for “this element is visible on page load”

  7. Examine your page in preview/run mode. You will see that the element is visible and the page has expanded to include it.

What am I missing about your use case?

2 Likes
#8

Thanks, @keith - I use exactly that elsewhere but this particular case makes the screen about 500% longer than normal. It is a rare case but one I need to cater for. I’ve just got it working beautifully with CSS Tools. Works perfectly. I can change the page length just for that one instance. Thanks for bearing with me and those detailed explanations with images. They were easy to understand and I’m sure will help others too.

#9

I spoke too soon @keith - your approach works perfectly in my case. I’m going with it because I don’t like relying on plugins when I can avoid it … they can break when bubble changes things. Appreciate the solution. Cheers

1 Like
#10

Gotcha. I still think that’s an odd way to approach it ;), but glad you got it working!

#11

I had to add a group to the page itself and not within the higher group.

I am building the mobile version of my site. I had fixed width/height at 380 x 640 but needed to make one group 900 height.

I had to:

  1. Change page to 900 high
  2. Put hidden collapsible group inside the page from 640 to 900 position
  3. Move bottom floating menu to the bottom of 900 position
  4. No other changes were needed. The 900 height group parent was already set to collapse when hidden.
2 Likes
#12

This is the correct solution but be warned that all your groups will now have a parent page height of 900px. Even when you collapse unused groups, the app with remain 900px high (I can’t find a solution to this issues).