TextBlock padding doesn't work as expected inside a ScrollViewer

Should padding on a TextBlock work when inside a ScrollViewer?

Playground example

Explanation
In a playground, I created a fullscreen UI, added a ScrollViewer and then a TextBlock. PaddingTop and PaddingBottom don’t seem to do anything, seems like its getting stripped out. PaddingRight and PaddingLeft do affect the width of the text, however it only gets applied to the right side. Is this expected?

I created a nearly duplicate ScrollViewer aligned in the center, but instead this one uses a StackPanel in between the ScrollViewer and the TextBlock. This is where I discovered the Scroll bar clips the StackPanel. Seems like adding a paddingRight the same size or bigger than the bar would fix the issue. However, after adding padding to the StackPanel, now the StackPanel is clipping its contents.

I then created a third example aligned to the right. I removed the padding from the StackPanel and instead applied that to the TextBox. The padding does seem to work as expected here. However, this would mean each control added to the StackPanel would need to have its padding set appropriately so it doesn’t get clipped by the Scroll Bar. I would definitely prefer to add padding to the stack panel and not worry about it in the child controls.

I should also note that our team is still in v4.1 but plan to update to v4.2 soon. I tried to run my playground example in v4.1 but I get that createScene function must return a scene. error.

Question
Is this potentially a bug or am I just not understanding the controls property? What is the best way to build text boxes with padding similar to how CSS FlexBox?

Side Note
I am getting my hands dirty in BabylonJS GUI for a text heavy application and I’ve been struggling to find examples showcasing advanced control of text and text layouts. If anyone knows of a text heavy based GUI example out on the playground, I’d greatly appreciate a link.

pinging @Evgeni_Popov

Can you confirm that the fix from Auto height issues in TextBlock with padding and other controls; possible bug is ok for you?

@Evgeni_Popov I just went through my original playground example from this post using v4.2.0-beta.1. Many of the issues are now fixed. I’m really only finding 1 problem now and that’s with the way paddingBottom is being handled when calculating the final height of a StackPanel or ScrollViewer.

Is it expected that a ScrollViewer/StackPanel will eliminate bottom padding of its child?

Here are my notes as I updated the playground example.
Playground Example #4

EXAMPLE 1: Issues with TextBlock in ScrollViewer

  • [fixed] paddingTop seems to be working as expected now
  • [fixed] paddingLeft now creates padding on the left instead of on the right. Appears to be working as expected
  • [broken] paddingBottom has no effect. It appears that the bottom padding is getting stripped which is not desired.

EXAMPLE 2: StackPanel Issues

  • [fixed] adding paddingTop no longer causes the stack to be clipped
  • [fixed] paddingRight now works as expected
  • [broken] paddingBottom has no effect. It appears that the bottom padding is getting stripped which is not desired.

EXAMPLE 3:

  • [broken] paddingBottom has no effect. It appears that the bottom padding is getting stripped which is not desired.

Let me know if you have any questions.

Should be fixed by:

2 Likes