Let's figure out how we can make sure that our code editor always has some with assigned to it so it
does not get squished off to the left hand side for that.
I'm going to go back over to the code inside if you're going to find my code editor access file.
Here's the ED wrapper element, and I'm going to add in a new rule to that of with one hundred percent
like so.
I save that and then go back over, I can now see that the editor is kind of filling up or expanding
in the horizontal direction as much as possible.
There's kind of this empty block over here.
This empty block contains our iFrame element or the preview window.
I think it would be a lot easier to debug this stuff if the preview window had a white background,
not even kind of suits.
Will you eventually want to have for our finalized application?
We want that preview window to always have a white background just to make sure it's really clear that
some content is eventually going to appear inside there.
So to make our iFrame white, we can just give it a white background.
It's going to go back over to my code editor.
I'm going to find our preview TSX, TSX file, I'll go down to our iFrame, and right now, once again,
we're going to add on some direct inline styling right here.
I'm going to say that I want my iFrame to have a background color of white.
So now we go back over.
Yeah, now this is starting to look a little bit better.
So there's the preview window and we can see very easily that it is expanding to fill up as much space
as possible in the horizontal and vertical direction.
Now, the next thing we need to do is make sure that this Ed doesn't expand outside of the vertical
bounds of this little Draga right here.
For that, I want to remind you about a setting we had set up a long time ago to back inside of our
code ed file.
Here it is right here.
I'm going to scroll down to all the inside of your.
I'm going to find Armonica Ed component, so it has right now a hardcoded hight property, a 500 pixels.
That is why the ED is currently trying to essentially escape out of this little Cizre.
I'm going to update that height to be 100 percent instead.
Now, the ED is only going to expand to fill up everything to the Cizre if I save that.
Yeah, there we go.
All right.
Now, that is looking pretty good so we can refresh everything shows up correctly, and we can very
easily at least size this thing in the vertical direction.
Now, there's one little bug inside of here that I want you to be aware of right away, because you're
going to notice this really quickly inside of your browser.
We're currently showing an iFrame element.
At some point in time, you might move your cursor over the iFrame as soon as you do.
So, if you start to click or drag or do anything else, those different events are being sent into
the iFrame element as opposed to our top level document.
So what does that really mean?
Well, it means that if I start dragging this thing and then start to resize or drag my mouse into the
iFrame itself, I'm not going to be sending any drag events to the Cizre element anymore.
It's going to send these drag events into the iFrame itself where those events are essentially lost
if I start to resize really quickly.
Now still dragging, but you'll notice that nothing is actually resizing.
As soon as I move my mouse out of the iFrame, however, everything is going to immediately snap to
where my cursor is.
Now, you and I are not going to directly fix this problem inside this course, but let me just tell
you a way that you can very easily solve this and who knows, maybe we'll just spend a little bit of
time to fix it up really quickly.
So to fix this, all you really have to do is say that whenever we are dragging on this Cizre, we want
to show some kind of Divx or just any kind of HTML element entirely over the iFrame.
If we show an element over the iFrame than any drag, events will be sent to that element inside of
our top level context or top level document as opposed to into the iFrame itself.
So again, if you want to solve this and make sure all the drag stuff works correctly, all you have
to do is show something over the iFrame whenever you are dragging stuff around.
OK, so, again, just want to tell you why some of the dragging interaction is going be just a little
bit funny.
Well, I'd say overall, this looks pretty good, but right now we've only got a Cizre that works in
the vertical direction and we want to make sure that we eventually have one that works in the horizontal
direction as well.
So still a little bit work left.
The other thing I want to mention is that right now, if I start to drag down really far, I can eventually
start to essentially resize this element entirely off the screen.
And now I can't even get down.
I can't even scroll down on the screen to get down to that resize or anymore.
So we might also want to figure out some way to limit how far a user can resize an element as well to
still definitely a little bit of stuff for us to do.