TL;DR
What is the best method to build a UI that requires TextBlocks and padding without having to manually calculate each Control’s height?
Are these bugs or expected behavior?
- Children of a StackPanel with padding get clipped unexpectedly.
-
adaptHeightToChildrendoesn’t seem to calculate properly when StackPanel is involved. -
adaptHeightToChildrendoesn’t maintain bottom padding as expected.
Full Detail
What is the best method to have a TextBlock automatically set it’s height based on the amount of text AND have some sort of padding around the TextBlock?
Below are notes I took while trying to build a layout. Each test noted below can be found in the Playground Example. Uncomment the test you want to run at the end of the file.
1
My base control will be a Rectangle with a fixed width, 100% height, a background color, and 16px of padding. This is the Panel in which my controls will be added. I will refer to this as the Surface Panel.
Test 1:
2
A TextBlock can size itself using .resizeToFit = true combined with .textWrapping = WordWrap. In my scenario, I can assume that the width of the TextBox will be 100%, determined by some parent container (likely a Rectangle, Container, or StackPanel). Any padding added to the TextBlock will function as expected, reducing the usable width of the TextBlock. All is good so far.
Test 2:
3
Now, I want to place the TextBlock in a Rectangle to create a ‘card’ style. I can create a Rectangle with 100% width and use .adaptHeightToChildren = true to have the Rectangle become the same height as the TextBlock. Without this, the Rectangle would be 100% height which is not desired or the height would need to be manually calculated.
Test 3:
4
Next, I want to add a second card to the layout. I can create a StackPanel and then add two cards as children. Everything still seems good. I’ve got two cards, each with text inside surrounded by padding. The two cards are stacked vertically. Somehow the StackPanel is only the size of its children - is this its default handling?
Test 4:
5
Lastly, I want to add padding between the cards (or StackPanel) and the Surface Panel. I can do this by adding padding to the StackPanel. This is where I start to run into problems.
Test 5:
I get that nice padding around the StackPanel I wanted, but it breaks the layout of the children cards. Is this behavior expected?
Problem 1: Children of a StackPanel with padding get clipped unexpectedly.
6
Ok, I’ll scrap the padding on the StackPanel to get back to a clean design. The surface panel is using padding, and that isn’t breaking the layout at all. Let’s try adjusting that padding and see how the cards react.
Test 6:
Removing the padding of the Surface Panel doesn’t cause any harm.
7
Increasing the padding also works as expected. The children are sized as expected and are not clipped.
Test 7:
8
Alright, since Test 6 & 7 didn’t cause any problems, lets see if adding another Rectangle between the surface and StackPanel would work. I will call this Rectangle the Padding Panel.
Test 8:
Looks like it worked! I seem to have found a layout that will be responsive while setting the width on a single control.
9
This is nearly a complete layout for my design, however there is an important piece missing. I don’t want the Surface Panel to be full height. I want it to expand and shrink to fit its content. It looks like I can do this with .adaptHeightToChildren = true on the two panels that need to shrink: Surface Panel and the Padding Panel.
Unfortunately I am running into a clipping problem again.
Test 9:
Problem 2: adaptHeightToChildren doesn’t seem to calculate properly when StackPanel is used.
10
I can showcase this problem differently by only applying the adaptHeightToChildren property to the direct parent of the StackPanel.
We can see that the issue definitely occurs here. Notice that we have lost the bottom green corners of the StackPanel. This leads me to believe that there is a calculation issue with the StackPanel.
Test 10:
11
I tried setting adaptHeightToChildren on the StackPanel as well. With similar, but worse results.
Test 11:
Could this signify there may be a problem with the calculated height of the Content Cards?
12
I should note that if I give the StackPanel an explicit height in pixels, it’s parent Rectangles adapt to the size, but not perfectly.
The content obviously fits, but that nice looking padding between the StackPanel and Surface I accomplished in Test 8 is now broken. There is no bottom padding anymore. Notice the StackPanel’s green background goes all the way to the bottom of the UI.
Test 12:
Problem 3: adaptHeightToChildren doesn’t maintain bottom padding as expected.
Questions:
- Any suggested solutions or improvements?
- Does BabylonJS GUI follow any specific box-model similar to the CSS models?
- Is padding included or excluded in height/width properties?
- How does a StackPanel determine its height if it is not explicitly set?
- Is it possible to inline styles in a TextBlock? Ie. bold specific words in the TextBlock?
