Trying to vertically center a textblock inside a scrollviewer

Stuck in a GUI labyrinth as I try to figure out how get a textblock vertically centered on a scrollviewer, while preserving the resizeToFit = true so that the textblock scrolls inside the scrollviewer when the textblock is really big.

I’ve added the vertical centering on the scrollviewer, and on the textblock(not sure if that would help), but still to no avail. I imagine this is probably something really simple or silly I’m doing, but any help appreciated!

Scroll Viewer Example Adjustable Text | Babylon.js Playground (

Hello! Let me investigate this :slight_smile:

Oh! I believe all you need is a container inside your scrollviewer (i.e. a rectangle). Have the rectangle take a height of 1 (100%) of sv and have your tb aligned vertically inside your rectangle (also with a height of 1 (100%) of your rectangle container. Give a minute to illustrate with a PG. I did this before, shouldn’t be too long.

Oops, was a bit too fast on this one. It seems like center does not work. I can align it bottom or top but not center. Seems a bit of an odd request anyway (sry).
Here’s a PG to play with. @carolhmj may be you have more luck with this?
Again, my apologies for stating it was ez. Should have made the PG first :zipper_mouth_face: :wink:

Yep from what I’m seeing, the alignment parameters don’t seem to “effect” the content inside the ScrollViewer, I’m asking the team to see if this is by design :thinking: Scroll Viewer Example Adjustable Text | Babylon.js Playground (

1 Like

Well, it does (sort of). Aligning either top or bottom works fine. Only center does not work. On the other hand, it feels a bit odd anyways. I suppose you can still adjust it with the verticalBar.value.