Hi everyone, see this little comment box on the side here... I'm sure it has a name, I don't know what it is... but when we delete text or add text... can you see, it expands, responsive... it's a nice mixture of auto layout, absolute positioning, and constraints... all right, let's jump in and make it.

To get started with, I'm going to hide some stuff... because throwing everything at this tutorial... and ending up with a bit of a mess... so I selected my avatar, 'Command Shift H' to hide it... 'Ctrl Shift H' on PC, I'm going do the same with this... and let's do the little text expanding thing.

So first of all I need a frame... I'm going to drag it out a size, I can adjust this in a sec... I'm going to use a color, '500', I'll use my red-ey color, let's give it a name... "Poorly named, Dan," I know, there's a technical word for this thing... I can't think of it, and if I'm honest I doubt I even knew the word... there is a word for it...

so like before I'm going to kind of get at the right size first... remember, dragging it in, holding space bar, kind of get it lined up... I guess, pretty good, actually nailed it... so resize it here, get it how you want, and then... drag it into your Auto layout, so off, into Auto layout... same as before, we're going to set the absolute positioning to about here...

and what we want to do is get it to stretch. So I'm going to get it to snap to the edge there... yes, it's too close to the text, we'll fix that in a bit... but what I want to do is, I want to say, 'Constraints', to the 'Left', sure... but I want the 'Top' and the 'Bottom'... and what that means is, it's going to look at the overall size and adjust...

so if we adjust the overall size by changing this text box... which is set to Hug Contents... or at least the equivalent for a text box, which is Auto Height... can you see, it changes, cool, huh... one line, lots of lines. I'm going to go back to what I had.

Now the only problem with this is that it's not particularly robust... in terms of responsibility... not responsibility, responsiveness... stretchy text things has no responsibility in the world... what we want to do is, to make it a little bit more robust... actually, it's going to do two things, actually, this next bit...

so I'm going to undo till we go back... there's two things that I want to do, I need to push this over... and I can't go to the text box and say, you go this way... because it is all left aligned inside of this Auto layout... so I can go 'Shift Enter' to select the parent... and I can say, to the 'Right'...

and it's kind of working, but it's moving everything else over... it's not really what I want... so I'm going to 'undo' it that way... and what we're going to do is a bit of inception for Auto layouts... so I've got Auto layout parent, this text box though... we know that if I add an Auto layout to it...

'Shift A', it gets padding around the outside... and what I'll do is I'll set that to 0, tab across to 0... and show them all, just say, on the left let's have a bit, it'll do... so I've got some padding, so that's pretty cool. The other thing is that, that's still a problem, it's stretching... because what it's doing is it's just a bit of a trick...

we're saying, stay this far from the top and this far from the bottom... and when the text box expands, so does this... but there's no like direct connection between the two... this text box makes the overall parent bigger, so this gets bigger... and it kind of works until you do this... what we can do though is we can say, you, we can put you inside of this...

so let's go, you... put you inside of that Auto layout... because it's already an absolute position. I'm inside this frame, let's give it a better name, calling it "Text Box"... inside of it is my text box plus my stretchy thing... and because it's absolutely positioned I can kind of drag it out...

don't want it too far out... we don't want to drag it out, out... so remember, hold 'space bar', let's get it back in there... hold 'space bar' while you're dragging it, and now it's--  I'll use my arrow key... it is still inside my text box, which is an Auto layout... let's click on this guy, he's still set to top and bottom...

but he's referencing this box now... so when I make this bigger can you see, it doesn't wreck it... but it still has that nice functionality that it gets bigger and smaller. That is how to make a stretchy-- give me the name if you do know it... if you're a Typographer, and you're like... "Ah, that's called a-- something," something or the other...

something to do with a pull quote, indent or something like that... you know the name for it, let me know in the comments... but for now I think that's it for absolute positioning... we did a few different versions of it because it is quite powerful... and super useful for supercharging your Auto layout amazingness... there we go, all the adjectives.

Oh, last thing before we go, a shortcut test, it's a Pop quiz... I resized this, so it's now a fixed width... what's the shortcut to get it to jump out and fill the container, do you remember? it's you do both of them, double click it, realize it's not the one you want... and then you go 'Option' on a Mac, 'Alt' on a PC, and double click it... and it fills the container, there we go, pop quiz over...

and that my friends is the end of the video.... I'll see you in the next one.