21  Three Reasons for Strange Layouts

21 Three Reasons for Strange Layouts

In the last section we refactored our built cat animation container over to a positioned element. But when we did so it appears that the cat is no longer showing up on the screen of our device. So in this section we’re going to dive really deep and figure out exactly what is going wrong here. Now to get started I’m going to make a tiny little code change inside of our build method and as soon as we do You might start to have a better idea of what’s going on. So inside of built I’m going to find my stack children remember that we had set the order in which we define the children inside. This list defines the order of what shows up on top of the other elements. So the box is later on INSIDE THE LIST. So the box currently is showing up on top of the cat animation. Let’s try changing that order and then saving and refreshing and just see what happens. So now the cat is going to try to show up on top of the box. I’m going to save that. I’m going to do a refresh and we’ll just see what happens. OK. So that looks pretty strange Hopefully you’re seeing something like that right there. So what you’re seeing right there is the left whiskers of the cat. And I know this coloring it’s black on black it’s really hard to see. But essentially what we are seeing right here are the left whiskers of the cat. So clearly something is really bonkers right now. Let’s talk about how this position to which it right here works and get a better idea of why we’re seeing what we’re seeing. So like we just said when we’re looking at positions when we are using a positioned widget and if we go back over to the stack class really quickly when we’re using a position widget the stack ignores that thing when it’s trying to decide it’s sizing. So with that in mind we can go back over to this diagram again. So here’s our stack the stack goes onto the very center of center. We then put our container in the stack and the container tries to constrain or shrink down just to fit that container. So the SEC says I just want to be as big as the container. And again technically it’s like right on top of it like pixel perfect understanding a little bit of spacing in there so we can kind of get a sense the layout. So the next thing that gets rendered inside of that stack after the box is now the cat animation and the cat animation shows a position widget with a bottom of cat animation value. So right now let’s just ignore what the image does. Let’s just talk about what position does with this bottom property. So when we assign a bottom this thing initially starts off with a cat animation value value of zero. Remember that’s what everything begins at when we assign a positioned with a bottom of zero. That’s essentially trying to fix the bottom edge of the positioned element 0 pixels off the bottom of the stack. So we can imagine here’s the stack in green. Here’s this new positioned element. Let’s imagine that the position element is like this big the positioned element is going to not try to position itself at the top left of the stack as is the normal default. Instead it’s going to go to the top left as is the default and then it’s going to apply that bottom constraint of 0 pixels. And so essentially the position element is going to say I’m going to try to get my bottom edge 0 pixels away from the bottom edge of the stack. And so there’s the stack right there. They’re going to line up those bottom edges like so. And that’s what we end up with. So again we get the position Elman It’s up some mystery sides we don’t really know. It first starts off on the top left as is typical inside of stack because that’s the default location the top left and then position says I want a bottom of zero pixels and so it’s going to try to offset against the stack by zero pixels like so and so it ends up live right like that OK. So that explains why we’re seeing kind of like just you know the bottom left of the cat as opposed to like not the top left that you might expect over here. That’s why we’re seeing just down over here. It’s now the next interesting thing is how large the cat image is. So remember before I had said that when we place a image on our screen the image is going to try to expand to take up as much space as possible as soon as it hits either its limit of the width or the height. And so when we first put our image in it was something like that and it was trying to fill up the entire span of the available screen of the space of the window. However when we use a position widget that rule goes out the window when we use a positioned widget position says hey you know what if you want to show something inside me. Go ahead. I have all the space in the world. The position which it tricks everything inside of it to thinking that it has all the space in the world available so we render the image inside of the positioned elements and the position element tricks the image and it says hey image you can be as big as you want to be. And so the image grows to be really really big as large as it possibly can be inside of the position widget and that’s why it appears that it is so large inside of here. So it’s kind of strange thing number two. So strange thing number one was why we’re seeing the bottom left corner. Strange thing number two is why the image is so large. Strange thing number three and this is the really interesting one is why we are only seeing the whiskers right here and why we don’t see the rest of the cat. OK. So that last thing strange thing Number three whenever we use a stack widget by default it’s going to try to only show stuff that eventually ends up inside of its viewport. And essentially it’s going to ease deletes or erase or not show anything that tries to expand outside of the dimensions of the stack. So even though we’ve got the position which it and the image something like So the stack says hey you know what I see image that you are exceeding my balance. I don’t care for that image. I’m going to clip you and I’m not going to show any extent of you that exceeds outside of my own bounds. And so that’s why we are only seeing this kind of like bottom left and it appears to cut off on the right hand side and the top one side getting the stack is saying get out of here. I don’t care about you. I know you probably want to show something above me and to the right but I’m not going to show anything that’s trying to show up outside of my own extent. All right. So three reasons why we’re seeing what we’re seeing so hopefully that makes a little bit more sense. And we’ve got a little bit better idea of how position is working. Let’s take another quick pause. When we come back the next section we’re going to make a little change to the position which it’s to get this thing to be properly constrained within our stack essentially like so. So quick pause and I’ll see you in just a minute.

Leave a Reply

Your email address will not be published. Required fields are marked *