1
00:00:01,359 --> 00:00:05,770
Let's add in a little bit of customs that is going to place our action bar at the top right hand side

2
00:00:05,770 --> 00:00:06,610
of each cell.

3
00:00:06,970 --> 00:00:10,780
Well, then eventually come back and add in some more success if we are showing this thing inside of

4
00:00:10,780 --> 00:00:11,290
a code cell.

5
00:00:11,320 --> 00:00:12,760
We want that nice dark background.

6
00:00:12,880 --> 00:00:17,360
Otherwise, the action bar is just going to float at the top right hand side of a tech cell.

7
00:00:18,230 --> 00:00:21,950
OK, so to get started, I'm going to go back over to my action bar, TSX file.

8
00:00:22,330 --> 00:00:24,490
I'm going to find that top level div inside there.

9
00:00:24,580 --> 00:00:27,400
I'm going to add in a class name of Action Bar.

10
00:00:29,380 --> 00:00:33,670
Then in my component's directory, I'll make a new file of action, Bardot, CSFs.

11
00:00:34,930 --> 00:00:39,580
I'm going to immediately go back over to our component file and import that access file at the top.

12
00:00:45,190 --> 00:00:51,640
Then inside of action, Barcia says, Aladin DOT Action Bar, and we're going to make sure that we always

13
00:00:51,640 --> 00:00:55,810
position this thing at the very top right hand side of the wrapping element.

14
00:00:56,050 --> 00:01:02,260
So either the Texel or the code sell by just using a position absolute and a top of zero and a right

15
00:01:02,260 --> 00:01:02,770
of zero.

16
00:01:02,950 --> 00:01:04,959
So pretty simple, straightforward way of doing this.

17
00:01:05,990 --> 00:01:09,680
So I will add in a position of absolute.

18
00:01:12,050 --> 00:01:15,590
A top of zero and a right of zero.

19
00:01:17,150 --> 00:01:18,200
Kill it, save all this.

20
00:01:18,710 --> 00:01:24,560
Look back over and now it looks like, well, in the case of the Kozel, we've got this working.

21
00:01:24,800 --> 00:01:25,700
So what's going on here?

22
00:01:25,760 --> 00:01:30,140
Well, just remember, unfortunately, we don't have any other elements right now with a position of

23
00:01:30,140 --> 00:01:30,730
relative.

24
00:01:31,010 --> 00:01:36,260
Whenever you put in a position of absolute, that element will be positioned relative to the closest

25
00:01:36,260 --> 00:01:38,000
parent that has a position of relative.

26
00:01:38,280 --> 00:01:41,690
So right now, we're actually seeing all four different action bars stacked up on top of each other.

27
00:01:42,290 --> 00:01:47,030
So we need to go back into our different cell definitions and to each of them, we need to add in a

28
00:01:47,030 --> 00:01:52,610
class name or add an access rule to give these things a position of relative.

29
00:01:53,150 --> 00:01:57,770
We could add in those exact rules to our code cell and our text ed components.

30
00:01:57,770 --> 00:02:00,020
Or alternatively, we could just add it into the.

31
00:02:01,260 --> 00:02:05,490
Sell list item, which is what is wrapping the Texel and the code Kozel.

32
00:02:06,990 --> 00:02:12,660
So I'm going to go back over to my editor, I'm going to find Arcel list item, I'm going to give this

33
00:02:12,660 --> 00:02:14,970
top level div inside there a class name.

34
00:02:16,690 --> 00:02:22,600
Of cell list item, and then we will create a file for this component as well.

35
00:02:23,370 --> 00:02:29,020
So I'll create a new and punch directory, a new file of cell list item access.

36
00:02:30,790 --> 00:02:32,980
Go back over to our component at the very top.

37
00:02:33,990 --> 00:02:37,200
Import sell list item CSFs.

38
00:02:38,870 --> 00:02:45,770
And then finally, inside of that access file cell list item, and we'll give it that position of relative.

39
00:02:47,690 --> 00:02:51,050
So if we save all this once again, flip back over and refresh.

40
00:02:52,340 --> 00:02:54,680
Now it appears that the buttons are nowhere to be found.

41
00:02:55,100 --> 00:02:56,760
Well, again, just a little bit of a gotcha.

42
00:02:56,780 --> 00:02:57,970
The buttons are here.

43
00:02:58,010 --> 00:03:01,600
They're just being rendered behind whatever content we're displaying.

44
00:03:02,120 --> 00:03:06,890
So in the case of, say, the text cell right here, there is an action bar behind that thing.

45
00:03:07,400 --> 00:03:11,360
And if I inspect that element right there, I can see that there is the card content.

46
00:03:12,150 --> 00:03:14,720
If I go up to the parent, there's the smallest item.

47
00:03:14,960 --> 00:03:17,040
And inside there, there is definitely an action bar.

48
00:03:17,060 --> 00:03:20,840
Again, it is just hidden behind the actual text ed thing itself.

49
00:03:21,410 --> 00:03:24,410
To fix this up, we can just apply a Z index.

50
00:03:24,840 --> 00:03:27,260
There's technically another way we can fix this.

51
00:03:27,680 --> 00:03:28,940
We'll take a look at it in just a moment.

52
00:03:29,570 --> 00:03:33,200
First to show you yet we could definitely do a Z index to fix it.

53
00:03:34,620 --> 00:03:35,400
Alternatively.

54
00:03:36,490 --> 00:03:41,590
If we go back over to our sell list item, we can just swap the order of action bar and child.

55
00:03:42,040 --> 00:03:47,440
So if we show action bar after child, that means the action bar is going to have priority for being

56
00:03:47,440 --> 00:03:48,420
displayed on top.

57
00:03:49,120 --> 00:03:50,220
So I can save this now.

58
00:03:50,530 --> 00:03:54,040
Look back over refresh and now will always be displayed on top.

59
00:03:54,870 --> 00:04:00,420
The one downside about this approach is that whenever I see laid out like this, my kind of natural

60
00:04:00,420 --> 00:04:04,890
inclination is that I'm going to have a child and then show the action bar after it.

61
00:04:05,200 --> 00:04:08,940
But we are applying some CSFs that kind of inverts or flips that relationship.

62
00:04:09,290 --> 00:04:13,710
Success is going to show the action bar on top or kind of like first at the top right hand corner.

63
00:04:14,350 --> 00:04:15,870
So flipping the order here.

64
00:04:16,230 --> 00:04:22,170
Not perfect, but honestly, it's a little bit more optimal or more ideal compared to the alternative.

65
00:04:22,500 --> 00:04:26,580
The alternative is to use the index, which as much as possible we generally want to avoid.

66
00:04:26,890 --> 00:04:29,010
So I'll say that this is a good enough solution for now.

67
00:04:30,240 --> 00:04:35,370
OK, so we've got these action bars being displayed, but once again, just remember, if we are displaying

68
00:04:35,370 --> 00:04:39,660
them with a code editor, we want to have that nice kind of dark background or that bar up top.

69
00:04:40,200 --> 00:04:41,910
We still have just a little bit more work to do.

70
00:04:42,420 --> 00:04:44,780
Let's take care of this last step in just a moment.