Dynamic Scrollview with Scale with Screen Size

Hi :slight_smile: ,

I’m working on a mobile project where I need to dynamically populate a scroll view with UI elements. My goal is to achieve a scrolling experience similar to TikTok, where each element fills the screen.

Currently, I’m instantiating the UI elements, scaling them to the screen’s pixel dimensions, and then adding them to the scroll view. This works fine when the UI’s scale mode is set to “Constant Pixel Size.”

However, for mobile development, I’d prefer to use a “Scale with Screen Size” mode. Is there a way to scale UI elements within a scroll view to occupy the full screen on various devices while using the “Scale with Screen Size” mode?

How exactly are you scaling the elements?

Technically, in the layout you should be able to use size in percentage or flex-shrik/grow to the the adjustments. Using that with the image component to preserve the aspect ratio should be enough, but you could also use the geometry change event on the element to set the height based on the width for example.

This should work independently from the the scaling of the panel.

If you want to have a fixed width horizontally you could use move the slider in the panel setting to match entirely the “reference width” to the width of the screen, but I would suggest using the other mean of scaling as it would allow you to change the panel setting configuration later on.

My Code for instantiating looks like this:

foreach (VisualTreeAsset visualTreeAsset in learnTextList)
        {
            TemplateContainer learnScreenContainer = visualTreeAsset.Instantiate();
            learnScreenContainer.style.width = new StyleLength(new Length(100, LengthUnit.Percent));
            learnScreenContainer.style.height = new StyleLength(new Length(100, LengthUnit.Percent));
            uiDocument.rootVisualElement.Q<ScrollView>("ScrollView").Add(learnScreenContainer);
            learnTextElements.Add(learnScreenContainer);
        }

Unfortunately, the result in play mode looks like the image. For testing, I’m simply instantiating an empty VisualElement with a background color and a colored border. (The three elements are at the top)

I guess the Problem is that the content container is not scaling when an element is added so the 100% height gets so small.

Oh this is a frequent problem, by default the size the element has a width/height of auto. This make the layout use the the “intrinsic size” meaning it occupies the space that is the sum of all it’s children. But when children have their size defined in percentage of their parent size it make a recursive loop that is quite undefined.

When using percentage, you have to make sure the parent does not use it’s intrinsic size by setting it’s width or height as percentage or in pixels. I think you could also uses flex-grow/stretch to achieve this, but there is more value involved, but the nice thing is that it preserves the intrinsic size properties unlike setting an explicit width/height

You can use the UI debugger to “prototype” quickly the required change in styling and see witch parent does not fill the full content first in the hierarchy.

Let me know if you need more help with this.

That works. Thanks for the quick reply :+1: