ScrollView does not work on Mobile Version

I’ve built a page with a container at the bottom which includes a scroll view, because of much text.
But i am not able to scroll down in the preview version. I don’t know what’s the problem. I also tried to built a new one with less text, but it also can’t scroll down. The problem is only on Smartphone
You can see it in the video.

Any idea? Maybe it’s a bug? In WebVersion it’s working perfectly… And all the other ScrollViews are working. Only this one doesn’t work. Maybe because of the many paragraph elements or the much text?
I’ve built a new container with scrollview on my login screen with much less text. But it has the same issue. On my Web preview the scrolling works perfectly and on my smartphone it doesn’t work

In the page layout settings, you have to disable scroll and stretch to viewport height. These should really be built in to ScrollView somehow, as right now it’s not very straightforward to use, but with those both checked it should work.

Another problem with ScrollView is that there is some problem with it not scrolling to the very end if there are several elements on top of it, and this can be circumvented by either adding an empty container with some height as the last element within the ScrollView, or by adding padding to the ScrollView.

I’ve tried all the things you’ve said. But it’s still not working. I’ve disabled scroll in the style properties of the page and checked “stretch to the viewport height”. I’ve added an empty container with a height of 250px (before i tried also with 100px) at the end of scroll view and added a padding to the end of the scrollview. Between setting this up, i’ve saved several times to try out if it work. But it doesn’t. Still the same problem.

Which page is this for you? I couldn’t find the problem in your app.

It’s on the login page and on the Über uns page. It’s invisible. The container is called “Datenschutz” on both pages.

Now the problem is also with other scrollviews. Every time when a container includes a scroll view and in the scroll view on any point is a second scrollview, this second one wont work.
So scrollview one works, but scrollview 2 don’t. That’s on every page in Android Version.
Opera Momentaufnahme_2020-07-22_173513_platform.appgyver.com

App-ID: 103709

Nested ScrollViews do not work on Android by default. Looks like React Native (the technology powering your Composer app) has added support for it now, which would enable us to implement support as well. I added a feature request.

Unfortunately this means that nested ScrollViews only work on iOS for the time being :frowning:

ok thanks for answer.
that’s bad.
I hope it will implemented soon.

What seemed to solve the missing items for me in the simulator app was adding an empty container at the bottom of the list that is a bit taller than the list items.

However, list scrolling doesn’t appear to work in a webapp build viewed on my Samsung.

I was hoping that webapp views would behave like the mobile view does in the simulator app on my phone but vertical scrolling affects the entire page (even though I have scrolling disabled at the page level.

Is this not the case?

BTW, horizontal scrolling in rows nested inside a vertical scrolling list DOES work in a web app build … with the exception that vertical scrolling attempts scroll the entire page in which the rows horizontally scroll.

In a related question, what is the solution to display all items from a dynamic list?
Can the “buffer” container be added to the bottom of the scrolling list items somehow?

Hi!

The web app on mobile works exactly like on web currently, at least for now. We’re hoping to make better support for mobile web etc. in the future with navigation etc. choices. But not sure if that affects your case as I’m not sure I understand your problem. There might be a bug with how the scroll disabling etc. works on mobile web, but if you could give me some screenshots of your usecase and the behaviour you’re experiencing I could perhaps be of more help.

As for a dynamic list, we will have a recycling list solution coming up in our 2.X client. Other than that I think the current recommendation is to display a button that says “load more” that the user has to click to load more items to the list.

Thanks for your response!

I explored this scroll list issue further in its own topic:
https://forums.appgyver.com/t/vertical-scrollview-in-web-app-build/2486/16

There are screen recordings of preview views on desktop and mobile as well as “built webapp” recorded views on mobile and desktop in a couple of browsers.

I had a strange thing happen along the way in which the scroll list itself was displaying differently on different devices … but that seemed to resolve on its own during an overnight pause. I made followup recordings after that change.

I had cleared cache and done a “cold load” before recording the first examples showing this.
Maybe some kind of propagation timing issue???

For now, as you said, things seem to have resolved such that the lists behave the same on mobile and desktop browser views as well as in the Composer preview … but this is different than the behavior in the Appgyver app previewer.

The appgyver app previewer is the preferred behavior.

Is there some way to lock the page scroll in the browser view other than the page style settings in Composer?
Maybe some kind of absolute positioning?

Thanks!
Jim

Hi!

Thanks for elaborating. I haven’t noticed this issue before myself, as I seem to mostly develop on native, but I was able to reproduce this issue and made an internal ticket about it.

Until it’s fixed, it may be possible, like you said, to work around it by setting whatever you want outside the ScrollView to position:absolute and sizing the ScrollView accordingly below.

Thanks for your response! I’m planning to give that a try today and will post results.

1 Like