Can a ScrollViewer adapts its height to children?

Questions
1

In the ScrollViewer docs I see the accessor adaptHeightToChildren listed. However, upon testing it I’m finding it doesn’t do anything. I understand this is one of the more complicated controls, so let me explain my current use case.

Use Case:

  • Slide show-esque app that displays text in a Fullscreen UI on top of an interactive 3D scene.
  • The amount of text displayed is dynamic based on the author.
  • The container must grow and scroll to support larger quantities of text (requires the ScrollViewer).
  • The container should only scroll vertically and will have a fixed width.
  • Some slides may only have a few words displayed, meaning not much space is required.
  • We want as much as the 3D scene to be visible as possible, therefore we want the container to shrink down in size when the full 100% height isn’t required.

I’m essentially wanting the ScrollViewer to adapt its height to the children, but without growing beyond a maximum height. In my case, the maximum height is simply 100%.

Here’s a Playground with my first attempt at creating this functionality. In the playground, you can click the button to change the length of the text.

There are two examples at the bottom of the playground you can view.
Example 1 includes a ScrollViewer and Example 2 excludes it.

What you will find in the examples is that #2 provides the functionality I want, but without scrolling. #1 provides the scrolling, but is always at a fixed height of 100%.

Anyone know of a way I can accomplish this design?

2

The best I can do is providing a function that will let you do what you want in the PG but I don’t see how to cleanly add the functionality into the core because you need to update some parameters of the control hierarchy:

https://www.babylonjs-playground.com/#2J29TB#2

See the adaptScrollViewerHeight function. It will set the height of the scroll viewer as being the height of its children, with a max height = the container height.

When toggling the text, you need to reset the surface and scroll height to “100%” (see HandleButtonToggle), so that the computation done by adaptScrollViewerHeight is accurate. Note that you can reset the surface height to something less than 100% if you don’t want the max height being the screen height.

1 Like
3

Thanks @Evgeni_Popov! Seems to work fairly well. I’ll try using this in our project and I’ll let you know if I have any other questions.

4

For anyone else who may stumble upon this in the future and utilize the solution, you may have trouble figuring out from where to import the _ScrollViewerWindow class.

Here’s my import statement:
import { _ScrollViewerWindow } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewerWindow";

5

I was reviewing this playground example this week and noticed the calculation wasn’t correct. I saved an updated playground example and wanted to post it here for future reference.

EDIT: I was having troubles loading the playground example due to a different domain being used so I also created a new playground example here before I realized how to fix the playground URL.