1
00:00:01,180 --> 00:00:04,330
Our horizontal size is almost working as expected.

2
00:00:04,600 --> 00:00:07,480
We just have to add in a little bit of success to get everything working.

3
00:00:07,990 --> 00:00:11,260
OK, so the case we're going to add is just a little bit of kind of gotchas.

4
00:00:11,650 --> 00:00:14,590
Let me give you kind of a quick overview of what's going wrong right now.

5
00:00:15,040 --> 00:00:18,810
As you can see, this little resize element is getting displayed underneath the code.

6
00:00:18,820 --> 00:00:24,130
Ed, the reason for this is that we can do an inspect on that riser.

7
00:00:24,940 --> 00:00:27,070
So here's the eastern Cizre.

8
00:00:27,900 --> 00:00:33,240
And here is the ED wrapper and then right above Ed repr is react very sizable.

9
00:00:33,540 --> 00:00:38,170
So this is the sizable that is going in the horizontal direction right now inside of there.

10
00:00:38,340 --> 00:00:42,960
We have Ed wrapper and that thing is currently configured to take up one hundred percent of the available

11
00:00:42,960 --> 00:00:43,410
width.

12
00:00:44,250 --> 00:00:50,070
So all the width we have available inside of reactor sizable is going to the ED and that causes our

13
00:00:50,070 --> 00:00:54,830
little resize element right here to essentially pop out underneath it.

14
00:00:55,560 --> 00:00:58,200
So long story short, the ED is taking up too much space.

15
00:00:58,200 --> 00:01:02,290
It is causing the size thing to go underneath to fix us up.

16
00:01:02,610 --> 00:01:04,410
We want to find reactor's sizable.

17
00:01:05,660 --> 00:01:06,710
And we want to apply.

18
00:01:08,080 --> 00:01:13,180
A display of flex to it, which is pretty much going to say, I don't care how much space this thing

19
00:01:13,180 --> 00:01:13,940
wants to use.

20
00:01:14,230 --> 00:01:15,860
Let that little resize thing up here.

21
00:01:16,460 --> 00:01:18,680
Unfortunately, that's not the only change we need to make.

22
00:01:18,700 --> 00:01:22,690
If you start scrolling the thing or resizing, you'll notice that we start to get some kind of weird

23
00:01:22,690 --> 00:01:26,210
behavior where it looks like the preview window is going over the resize.

24
00:01:26,590 --> 00:01:31,240
In addition, the preview window itself is not really expanding to fill up all the available space here.

25
00:01:31,660 --> 00:01:34,420
So it's pretty clear we still have just a little bit of work to do.

26
00:01:35,520 --> 00:01:40,260
Now we understand the problem, we're going to very quickly add in just a little bit of success to solve

27
00:01:40,260 --> 00:01:47,100
all this stuff, I'm going to first begin by going back over to our sizable file inside of our horizontal

28
00:01:47,100 --> 00:01:47,570
case.

29
00:01:47,580 --> 00:01:52,830
I'm going to apply a class name of resize horizontal.

30
00:01:53,650 --> 00:01:59,680
So this is going to allow us to add in some success to select that resize element only in the case when

31
00:01:59,680 --> 00:02:01,730
we are doing a horizontal resize.

32
00:02:03,520 --> 00:02:06,000
Then inside of my sizable access.

33
00:02:07,040 --> 00:02:09,530
I'm going to add in a new rule for resize.

34
00:02:11,450 --> 00:02:12,020
Horizontal.

35
00:02:12,800 --> 00:02:18,260
So in this case, I want to add in a display of flex and a flex direction of Roe.

36
00:02:20,480 --> 00:02:23,840
Next up over inside of our code editor access file.

37
00:02:26,140 --> 00:02:28,000
I'm going to find Ed Rappaport right here.

38
00:02:28,720 --> 00:02:32,380
We're going to update our with rather than being one hundred percent, we're going to update it to be

39
00:02:32,440 --> 00:02:35,440
calc one hundred percent, minus 10 pixels.

40
00:02:36,160 --> 00:02:42,220
This means let the editor take up 100 percent of the space that is available, but leave behind 10 pixels,

41
00:02:42,220 --> 00:02:44,080
which is the width of that resize handle.

42
00:02:44,250 --> 00:02:49,510
So this gives us just exactly as much space as we need to show that little thing.

43
00:02:50,580 --> 00:02:56,520
I'll then staple these files, look back over, do a quick refresh, and now if I start to try to resize

44
00:02:56,730 --> 00:02:58,610
now it looks like it's working a little bit better.

45
00:03:00,850 --> 00:03:05,320
Now, the only remaining problem is that our preview window is not kind of stretching to take up all

46
00:03:05,320 --> 00:03:06,340
that available space.

47
00:03:06,880 --> 00:03:09,850
So to fix that up, I'm going to inspect the iFrame.

48
00:03:11,720 --> 00:03:16,970
Here's my iFrame and remember, we had added in that additional divx of Prevue wrapper right around

49
00:03:16,970 --> 00:03:17,150
it.

50
00:03:17,960 --> 00:03:23,030
So we really want to tell this previa wrapper to try to stretch and take up as much space as possible.

51
00:03:23,520 --> 00:03:26,720
You might think that to do that, we would add in a width of one hundred percent.

52
00:03:27,080 --> 00:03:30,090
But unfortunately, if you do that, it definitely now is taking up a hundred percent.

53
00:03:30,350 --> 00:03:33,980
Now, that thing is going to try to compete for space against the code editor.

54
00:03:34,020 --> 00:03:38,480
You're going to very quickly notice that there's some kind of strange interactions now rather than a

55
00:03:38,480 --> 00:03:39,620
width of one hundred percent.

56
00:03:39,890 --> 00:03:47,630
We want to add in a flex growe of one, which pretty much just means try to expand and take up as much

57
00:03:47,630 --> 00:03:48,470
space as possible.

58
00:03:48,680 --> 00:03:53,450
But don't try to limit other elements or compete against other elements that are inside of this thing.

59
00:03:54,080 --> 00:03:58,750
Now, I know the white box right here is not expanding, but that is because we added this flex grow

60
00:03:58,760 --> 00:04:00,230
to the previous wrapper itself.

61
00:04:00,590 --> 00:04:04,880
If you mouseover preview wrapper, you will see that that thing is expanding to take up all the space

62
00:04:04,880 --> 00:04:11,750
it needs so we can then add in an iFrame width of one 1/2 percent and now that thing is going to expand

63
00:04:12,080 --> 00:04:14,210
and take up as much space as expected.

64
00:04:14,810 --> 00:04:16,610
And I'd say that this looks pretty good.

65
00:04:18,570 --> 00:04:25,530
OK, well, now that we've added this success in directly to the browser, let's go back set files,

66
00:04:25,710 --> 00:04:29,940
an ad in the flexcar to the previous repr in a width of one percent to the iFrame as well.

67
00:04:31,320 --> 00:04:36,190
So I will find my preview on Prevue rapper.

68
00:04:36,270 --> 00:04:37,080
I'm going to add in.

69
00:04:38,140 --> 00:04:40,660
A Fleck's row of one.

70
00:04:41,640 --> 00:04:43,980
And then on the iFrame, I'll add on A with.

71
00:04:45,460 --> 00:04:46,840
Of one hundred percent.

72
00:04:48,540 --> 00:04:49,680
Hey, back over to our browser.

73
00:04:49,710 --> 00:04:50,490
Quick refresh.

74
00:04:51,500 --> 00:04:56,450
And now as I start to try to expand and claps, yep, this is looking pretty good, you will notice

75
00:04:56,450 --> 00:05:00,280
that it looks like the iFrame is sometimes like jumping out.

76
00:05:00,500 --> 00:05:03,230
Yeah, right there, starting to jump out just a little bit.

77
00:05:03,420 --> 00:05:08,480
That is probably related to that extra rule that we added in to for that after element just a little

78
00:05:08,480 --> 00:05:08,930
bit ago.

79
00:05:09,530 --> 00:05:12,470
If you want to do a little bit of debugging on that, go for it.

80
00:05:12,470 --> 00:05:15,050
Otherwise, I'm going to try to do a little bit of debugging on my own.

81
00:05:15,050 --> 00:05:17,150
I wasn't really expecting that to happen.

82
00:05:17,450 --> 00:05:20,720
So I'm going to do a little bit of debugging here and then we'll try to figure out how to solve that

83
00:05:20,720 --> 00:05:21,440
in the next video.