(SOLVED) Enable "Scrolling" on native web app

I have seen another post on this issue, but I wanted to make some clarifications as I am still having issues.

I am building a native app, but for now it’ll only be used a web app, but I wanted it to have the native feel and will eventually submit it to the app store.

My issue is that some of my groups are much longer than the native page. As a result some pages that should be fixed, now have large empty spaces beneath them, which is not optimal for the user experience.

I was told that I could simply make my groups whatever size i needed, then go back and resize the index to create the “scrolling effect”, however this has not worked for me. My larger groups simply get cut off. Perhaps this only works on native apps that are actually on the device?

Any help is much appreciated, thanks!

1 Like

@emmanuel or @NigelG any tips?

what about instead of a group you use a repeating group with just 1 column and 1 row. then select vertical scrolling in the repeating groups options?

@mylodge
That sounds doable, I have many groups I was hoping not to redo all of them. If its ends up being the only way then I’ll give it a Shot. Is this something that you have implemented?

in part yes, could you maybe just create that reaping group for each and drop the already created group inside the repeating group? might save you some time.

Just a theory, as I’m not in front of a computer to try it, but you should be able to use a collapsible group to change the sizes of your app screens. I’ll attempt to confirm it some time tomorrow if no one else does first.

I believe every main group I have (not sub-groups), has the “Collapse this elements height” option enabled. I will double check now.

Is that what you mean @natedogg

Not quite. The groups only collapse when they are hidden/empty, so your app screens wouldn’t collapse because of that.

Let’s say your app page has a height of 2000, but the current screen you’re building should only be 1000 pixels tall. You’d create the 1000 height group, then fill the other 1000 pixels with an additional collapsed group that gets rid of the extra space.

2 Likes

I think you may be right, just created a test page and it seemed to work. Going to try it on another few to confirm.

1 Like

@natedogg, I get less scroll, but still too much. enough to lose view of the group completely. Perhaps you can try, i might be doing it differently than you intended.
Here is what I did

  1. I brought up one of my groups
  2. I created a second group beneath it and stretched it out to bottom of the index
  3. I set that second group to be hidden on page load and checked the collapse on hidden option.

@alexsstockton,

It’s working. Did you remember to un-check the box that says “This element is visible on page load” for the bottom group?

You can look at how I set it up here: https://bubble.io/page?type=page&name=native-app-page-height&id=forumapp3&tab=tabs-1

1 Like

@natedogg, interesting, I set it up the same way. I have many groups on the same page, Does that impact the process?

I tried setting it up with my calendar group. I created a second group to fill the height, unchecked the visible on load box, and set it to collapse.

Once again, it does remove a lot of the scrolling space, but not all, on my phone the calendar looks like this.

When I scroll to the bottom

After taking a look, I can see that your main groups tend to each have different heights, which is why you have the extra space at the bottom.

I made a slight change to the forum app page I posted for you earlier. https://bubble.io/page?type=page&name=native-app-page-height&id=forumapp3&tab=tabs-1

This time, I made the main group the height of the entire page and put the collapsible group inside the main group at the bottom. If you follow this method and insert a collapsible group at the bottom of each of your main groups, the page should be the correct height no matter what.

2 Likes

This was one of the first methods I tried, I just setup my landing page exactly like your app to no avail.

I was thinking that maybe every single group has to be setup before it will work at all, i have only tried a few. So i’m going to do that now.

@NigelG I finally figured it out! It turns out that I required both methods 1 and 2. I needed a collapsing group to moderate every individual group AND another group outside of those groups to moderate the length of the index itself. This forum and community is really fantastic, thanks for your time and help Nigel!

Sorry if the info I gave didn’t work out. I’m using the native app previewer.

@natedogg, what happens when text is set to “stretch to fit” causing a group to expand beyond the app’s dimensions? This seems to increase the height of the entire app, rendering other groups scrollable with blue space beneath them.

Is it best to avoid anything that increases the height of a group? Or is this only an issue within the previewer?

@alexsstockton,

I tend to avoid elements that expand my main groups in native apps unless I have so much content that I have to expand.

And if you have to display enough text that would expand the element, the best practice would probably be to expand the parent group and make the text element large enough that it wouldn’t have to expand.

But in general, too many expanding/collapsing elements can be buggy/hard to clean up mistakes.

1 Like

@alexsstockton can you post what you did? I would like to take a look at it since I’m making a native app as well and looking at how to expand/collapse groups. Thank you.

Hi everyone!

I did click on “collapse when hidden” but still it keeps scrolling. It doesn’t seem to work. At least the whole app-page is suuuper long, since it’s a one-page-app and the super long “edit profile” group is always part of it.

Also, I did set the app-page itself to native app/mobile and restricted the height to 600. But now it doesn’t scroll further than those 600px, despite my content being longer

When I expand to the full length everything else gets messy. (Like the floating save button for example - it just disappears.)

Any help to make this feel like a proper app and not losing half the content, please?

Thank you!
Alex