Should padding on a TextBlock work when inside a ScrollViewer?
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.