Can't figure out a very basic layout... (container scales to fit children, text pinned to top-left)

Hi,

I'm messing around and trying to pin some dynamically changing text to the top-left of the screen. I'd like to also include a background image behind the text that scales to fit.

Something like this....



I figure out how to make the text element stretch to fit its content with the Content Size Fitter (set to PreferredSize on both axes). Next I added an Image and made the Text a child of that. Finally I added a Content Size Fitter to the Image, thinking I was rather clever... and the image disappeared entirely. D'oh.

The next thing I think I'm going to run into after I get that text resizing: the origin point of my text seems to be the bottom left, even though I have my Paragraph vertical alignment set to top:



What I would expect to see here is "Line 1" contained in the white box and "Line 2" below it.

I must be missing something and of course documentation is sparse for the beta, could somebody offer some advice?

Edit: After poking around in the settings, it looks like I can get what I want by using a Horizontal/Vertical Layout... but that would only allow the text to scale in one direction... is that a limitation of the GUI system? It's definitely not something I'm accustomed to coming from a web development background.

 

Firstly, if all you want is text on top of an image, the simplest way to do that is to create a new button from the menu. Don't add a button component, create a new UI button. Once you have the button, remove the Button component. Done. You now have text on an image

Next, looking at your screenshots, I am not seeing your anchors so I am assuming they are in the center of the screen, right? Move your text's anchors into the button so they form the bounds of your text. I do this for all my GUI elements since I want my content to scale with the screen, not reposition itself relative to the screen but yeah, all my text elements anchors are inside my button and my text work just fine.... Only problem is that each time I decide to reposition the button I need to reposition the text's anchors again

I've not noticed the Content Size Fitter thing you mentioned, though... thanks for the tip. Will see what that does. As it is, my text changes font size to fit inside the area I defined. Either it shows up smaller or it simply says 'I don't fit in this area so I won't show anything at all". My text region doesn't auto scale itself so the text will fit... 0.o Interesting...

 

I assume your text is a child to the image.

Set both the anchor and pivot of the image to the upper left corner. Setting the anchor to the upper left corner ensures that the image sticks to the upper left corner of the parent rectangle. Setting its pivot to upper left corner ensures that if the image changes size, the point inside the image that keep its position is the upper left corner of it.

Now add a HorizontalLayoutGroup to the image, and then add a ContentSizeFitter to the Image too. This will resize the Image to fit with the child Text content. If you want padding, you can specify it in the padding property of the HorizontalLayoutGroup.

 

OK, I think I'm about 90% there. Now I can't figure out how to move the pivot. I assume it's that blue circle in the middle of the Rect tool? It looks grayed out to me, and any attempts to drag it around seem to have no effect (or succeed in dragging something else around):



Editing the Pivot in the Rect Transform in the Inspector is similarly non-responsive (it causes the text to wobble around a bit but nothing moves permanently)

*reads some docs before posting*

OH!!! I got it!!! *fist pump* Had to set the... thingy in the top of the UI from "Center" mode to "Pivot" mode. The UI is now working exactly the way I want it to! Thanks!

 

Please make sure to include this in the official Unity docs. It helped me a TON to understand why my ContentSizeFitter was vertically centering everything.

 

Ok, I've added some notes about this on the page about Content Size Fitter. It should be included in one of the coming betas.