1
00:00:00,690 --> 00:00:04,650
Let's figure out how we can make sure that our code editor always has some with assigned to it so it

2
00:00:04,650 --> 00:00:07,290
does not get squished off to the left hand side for that.

3
00:00:07,290 --> 00:00:13,020
I'm going to go back over to the code inside if you're going to find my code editor access file.

4
00:00:13,710 --> 00:00:19,260
Here's the ED wrapper element, and I'm going to add in a new rule to that of with one hundred percent

5
00:00:19,260 --> 00:00:19,800
like so.

6
00:00:20,720 --> 00:00:25,340
I save that and then go back over, I can now see that the editor is kind of filling up or expanding

7
00:00:25,340 --> 00:00:27,410
in the horizontal direction as much as possible.

8
00:00:27,980 --> 00:00:29,690
There's kind of this empty block over here.

9
00:00:29,900 --> 00:00:33,350
This empty block contains our iFrame element or the preview window.

10
00:00:33,830 --> 00:00:39,350
I think it would be a lot easier to debug this stuff if the preview window had a white background,

11
00:00:39,530 --> 00:00:40,490
not even kind of suits.

12
00:00:40,490 --> 00:00:43,160
Will you eventually want to have for our finalized application?

13
00:00:43,490 --> 00:00:46,970
We want that preview window to always have a white background just to make sure it's really clear that

14
00:00:46,970 --> 00:00:49,040
some content is eventually going to appear inside there.

15
00:00:49,910 --> 00:00:54,140
So to make our iFrame white, we can just give it a white background.

16
00:00:55,670 --> 00:00:57,680
It's going to go back over to my code editor.

17
00:00:59,130 --> 00:01:06,570
I'm going to find our preview TSX, TSX file, I'll go down to our iFrame, and right now, once again,

18
00:01:06,610 --> 00:01:09,360
we're going to add on some direct inline styling right here.

19
00:01:10,080 --> 00:01:14,670
I'm going to say that I want my iFrame to have a background color of white.

20
00:01:16,450 --> 00:01:17,440
So now we go back over.

21
00:01:17,680 --> 00:01:19,720
Yeah, now this is starting to look a little bit better.

22
00:01:20,060 --> 00:01:24,850
So there's the preview window and we can see very easily that it is expanding to fill up as much space

23
00:01:24,850 --> 00:01:27,250
as possible in the horizontal and vertical direction.

24
00:01:28,760 --> 00:01:33,830
Now, the next thing we need to do is make sure that this Ed doesn't expand outside of the vertical

25
00:01:33,830 --> 00:01:36,010
bounds of this little Draga right here.

26
00:01:36,710 --> 00:01:42,380
For that, I want to remind you about a setting we had set up a long time ago to back inside of our

27
00:01:42,380 --> 00:01:44,150
code ed file.

28
00:01:45,060 --> 00:01:45,780
Here it is right here.

29
00:01:46,290 --> 00:01:48,570
I'm going to scroll down to all the inside of your.

30
00:01:49,580 --> 00:01:56,390
I'm going to find Armonica Ed component, so it has right now a hardcoded hight property, a 500 pixels.

31
00:01:56,840 --> 00:02:01,060
That is why the ED is currently trying to essentially escape out of this little Cizre.

32
00:02:01,850 --> 00:02:05,180
I'm going to update that height to be 100 percent instead.

33
00:02:05,570 --> 00:02:11,920
Now, the ED is only going to expand to fill up everything to the Cizre if I save that.

34
00:02:12,470 --> 00:02:13,380
Yeah, there we go.

35
00:02:14,180 --> 00:02:14,710
All right.

36
00:02:14,720 --> 00:02:20,240
Now, that is looking pretty good so we can refresh everything shows up correctly, and we can very

37
00:02:20,240 --> 00:02:22,730
easily at least size this thing in the vertical direction.

38
00:02:24,040 --> 00:02:27,790
Now, there's one little bug inside of here that I want you to be aware of right away, because you're

39
00:02:27,940 --> 00:02:31,250
going to notice this really quickly inside of your browser.

40
00:02:31,270 --> 00:02:33,190
We're currently showing an iFrame element.

41
00:02:33,490 --> 00:02:38,100
At some point in time, you might move your cursor over the iFrame as soon as you do.

42
00:02:38,110 --> 00:02:43,760
So, if you start to click or drag or do anything else, those different events are being sent into

43
00:02:43,760 --> 00:02:47,050
the iFrame element as opposed to our top level document.

44
00:02:47,560 --> 00:02:48,760
So what does that really mean?

45
00:02:49,210 --> 00:02:55,270
Well, it means that if I start dragging this thing and then start to resize or drag my mouse into the

46
00:02:55,270 --> 00:03:00,910
iFrame itself, I'm not going to be sending any drag events to the Cizre element anymore.

47
00:03:01,060 --> 00:03:06,310
It's going to send these drag events into the iFrame itself where those events are essentially lost

48
00:03:06,990 --> 00:03:08,350
if I start to resize really quickly.

49
00:03:08,470 --> 00:03:11,830
Now still dragging, but you'll notice that nothing is actually resizing.

50
00:03:12,370 --> 00:03:16,780
As soon as I move my mouse out of the iFrame, however, everything is going to immediately snap to

51
00:03:16,780 --> 00:03:17,890
where my cursor is.

52
00:03:18,860 --> 00:03:22,730
Now, you and I are not going to directly fix this problem inside this course, but let me just tell

53
00:03:22,730 --> 00:03:26,750
you a way that you can very easily solve this and who knows, maybe we'll just spend a little bit of

54
00:03:26,750 --> 00:03:27,980
time to fix it up really quickly.

55
00:03:29,290 --> 00:03:33,940
So to fix this, all you really have to do is say that whenever we are dragging on this Cizre, we want

56
00:03:33,940 --> 00:03:39,430
to show some kind of Divx or just any kind of HTML element entirely over the iFrame.

57
00:03:40,000 --> 00:03:46,060
If we show an element over the iFrame than any drag, events will be sent to that element inside of

58
00:03:46,060 --> 00:03:50,110
our top level context or top level document as opposed to into the iFrame itself.

59
00:03:50,560 --> 00:03:54,730
So again, if you want to solve this and make sure all the drag stuff works correctly, all you have

60
00:03:54,730 --> 00:03:58,870
to do is show something over the iFrame whenever you are dragging stuff around.

61
00:03:59,910 --> 00:04:03,630
OK, so, again, just want to tell you why some of the dragging interaction is going be just a little

62
00:04:03,630 --> 00:04:04,200
bit funny.

63
00:04:05,150 --> 00:04:10,820
Well, I'd say overall, this looks pretty good, but right now we've only got a Cizre that works in

64
00:04:10,820 --> 00:04:14,240
the vertical direction and we want to make sure that we eventually have one that works in the horizontal

65
00:04:14,240 --> 00:04:15,170
direction as well.

66
00:04:15,500 --> 00:04:17,240
So still a little bit work left.

67
00:04:17,570 --> 00:04:23,690
The other thing I want to mention is that right now, if I start to drag down really far, I can eventually

68
00:04:23,690 --> 00:04:27,170
start to essentially resize this element entirely off the screen.

69
00:04:27,500 --> 00:04:28,940
And now I can't even get down.

70
00:04:28,940 --> 00:04:32,810
I can't even scroll down on the screen to get down to that resize or anymore.

71
00:04:33,290 --> 00:04:39,230
So we might also want to figure out some way to limit how far a user can resize an element as well to

72
00:04:39,230 --> 00:04:41,240
still definitely a little bit of stuff for us to do.