1
00:00:00,860 --> 00:00:05,840
Let's fix up this little issue where we never we tried to resize the very bottom code, so it appears

2
00:00:05,840 --> 00:00:08,360
that the scrolling kind of really starts to go crazy.

3
00:00:08,940 --> 00:00:11,480
So to fix this up, I want to give you just a very quick reminder.

4
00:00:11,810 --> 00:00:16,309
If you find your element, Inspector, and find the body element, remember that whenever we start to

5
00:00:16,370 --> 00:00:22,640
resize one of these elements, that body element gets a class name of react dragonball transparent selection.

6
00:00:23,500 --> 00:00:27,910
So with that in mind, let's go back over to our Ed, still inside of our sell list.

7
00:00:27,910 --> 00:00:28,750
TXT file.

8
00:00:30,090 --> 00:00:34,470
We're going to add in a new selecter here, we're going to take a look for the body element having that

9
00:00:34,710 --> 00:00:35,280
react.

10
00:00:35,580 --> 00:00:38,880
Dragonball Transparent selection class.

11
00:00:40,090 --> 00:00:46,030
And then we'll find inside their our cell list, so whenever someone is dragging this thing, we're

12
00:00:46,030 --> 00:00:50,110
going to add on to the cell list component, some margin on the very bottom.

13
00:00:50,500 --> 00:00:55,150
That extra margin is going to make sure that the window does not kind of snapshot or snap open, which

14
00:00:55,150 --> 00:00:59,350
is what is causing those really abrupt transitions in the height of a sizable element.

15
00:01:00,100 --> 00:01:04,209
It's going to add in a margin bottom of one hundred.

16
00:01:05,470 --> 00:01:10,360
This pretty much means add in a full screen height where the margin to the very bottom of our cell list.

17
00:01:11,030 --> 00:01:13,420
So now if I save this and flip back over.

18
00:01:14,850 --> 00:01:19,440
Now, I can start to expand this thing and contract it, and I no longer get that really weird behavior,

19
00:01:19,740 --> 00:01:24,780
if I scroll down towards the very bottom, I can still get it to kind of open up more, but not in such

20
00:01:24,780 --> 00:01:27,240
a way that it just kind of snaps open or snapped shut.

21
00:01:27,840 --> 00:01:32,120
Now with it at the full expansion height, I can start to close it up a little bit.

22
00:01:32,370 --> 00:01:34,140
And again, it works as expected.

23
00:01:34,680 --> 00:01:37,860
You will notice that when we let go, the entire view snaps a little bit.

24
00:01:38,070 --> 00:01:44,130
So like that right there, that's really just our current margin, bottom of zero pixels coming into

25
00:01:44,130 --> 00:01:47,310
effect because we're removing the margin bottom of one hundred.

26
00:01:48,330 --> 00:01:52,800
So if you don't really like that and if in general you want to allow a user to scroll past the bottom

27
00:01:52,800 --> 00:01:57,050
anyways, we could go back over and update the margin on our cell list itself.

28
00:01:57,420 --> 00:02:01,830
We could say that we want this thing to have maybe 50 percent height or 50.

29
00:02:03,030 --> 00:02:08,370
So now a user will be able to scroll past the bottom a little bit like so and just get some extra space

30
00:02:08,370 --> 00:02:08,880
down here.

31
00:02:09,340 --> 00:02:15,380
And now when we start to expand and contract by Lego, it does not suddenly snap anymore.

32
00:02:16,740 --> 00:02:21,720
OK, let's say that this is once again pretty good solution, you can definitely play around with a

33
00:02:21,720 --> 00:02:27,770
50 right here if you do not want to allow this much of space empty space at the very bottom of the screen.

34
00:02:28,260 --> 00:02:31,140
So if you want to use a different value, they're totally fine, totally up to you.

35
00:02:32,720 --> 00:02:38,210
All right, well, I would say that we are at a really good spot as many times as I've said that around

36
00:02:38,210 --> 00:02:40,670
the application and kind of a stand alone state.

37
00:02:41,150 --> 00:02:45,740
But remember, one of the original contents of this entire app was to allow a user to write in some

38
00:02:45,740 --> 00:02:49,460
amount of code, some amount of text, and eventually save that.

39
00:02:49,700 --> 00:02:53,660
They should then be able to refresh the page and still see the same content on the screen.

40
00:02:54,170 --> 00:02:56,540
So we need to add in some kind of data persistance here.

41
00:02:57,230 --> 00:02:59,110
Let's start to tackle that in just a moment.