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?

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:

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.

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.

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:

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

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.

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

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.

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