How How to set ScrollView component truely that will show all values inside?

How to set ScrollView component truely that will show all values inside?

Hi!

I get this problem sometimes, and I tried to make a reproduction of it right now but didn’t manage…… However I tend to work around it simply by adding an empty container to the bottom of the scroll view with a height that is enough to make all items appear.

1 Like

I heard that also if you’ve set a specific height to the scroll view it should scale correctly and allow scroll to the end! :thinking:

1 Like

Yeap, i tried to do this way, but i wanna show ScrollView components to the full screen of the phone, but when i set some heights, for example 500px, it looks different on different phones. For example in IPhone 6 it is on the full screen, but in other phones where screen is big, it’s only on the center. How can i set ScrollView that will show for the full screen (after button for example) for all the phones?

You can set it to a percentage value, e.g. 85%!

I’m having the same issue and have a partial solution, though I can’t figure it out entirely.

The scroll view works if the height is set. The height needs to be set to the viewport height (systemVars.dimensions.viewport.height) minus the height of any other object in the viewport (i.e. explicitly setting the scroll view height to the space available).

The challenge that I’m having is that I can’t determine the height of the other objects that need to be subtracted from the viewport height. In my case, the height of those objects is not consistent, so I need to use a formula to apply those heights to the scroll view height calculation.

Hmm. I would probably try to work this with having a flex height for the scrollview instead. That might mean you need an empty container at the bottom of the scrollview with some height to allow scrolling all the way down.

I was just yesterday trying something similar. Just setting Flex shrink in Align self Advanced options to 1 should make the Scroll view have the correct height. (For some reason the default 1 doesn’t do the same trick -> I’ll make a bug report for it)

image

You also need to have Stretch to the viewport height selected for the Page in style tab. (Disable scroll is not mandatory, but I’d select that also)

image2

1 Like

Changing the Flex Shrink to 1 (from the default 1) worked. Now the scroll view scrolls to the bottom of the list without an empty container at the bottom. Thanks!

How do I make it work in the new UDS? When I choose “Advanced” in the “Width & Height” settings for the scroll view, I can set Shrink to 1 but the height doesn’t support percentages there (“Unsupported binding”), and setting height in pixels is challenging since I do not know the height of objects at the top.

Atm there’s a problem (which I’ve reported) with screen sizes that not all content is shown, so I would for now just add an empty container with a fixed pixel height (e.g. 64px) to the bottom of the list to get forward.

Hi @Mevi

The solution of putting an empty container doesn’t work. Is there any other solution?

I am making a WebaApp page with a list of users. And no matter what I did, I failed to enable scroll down to the bottom of the page

Okay I got it now. Not really sure how I solved it. But replacing the parent component with a new component solved it

1 Like

On the advanced width and height, set both the height and width of the scrollview to 100% and make shrink 1. Works perfectly for me. And if the scrollview is in a parent container you’d want to have the same settings for it too.

1 Like