Let's add in a little bit of customs that is going to place our action bar at the top right hand side
of each cell.
Well, then eventually come back and add in some more success if we are showing this thing inside of
a code cell.
We want that nice dark background.
Otherwise, the action bar is just going to float at the top right hand side of a tech cell.
OK, so to get started, I'm going to go back over to my action bar, TSX file.
I'm going to find that top level div inside there.
I'm going to add in a class name of Action Bar.
Then in my component's directory, I'll make a new file of action, Bardot, CSFs.
I'm going to immediately go back over to our component file and import that access file at the top.
Then inside of action, Barcia says, Aladin DOT Action Bar, and we're going to make sure that we always
position this thing at the very top right hand side of the wrapping element.
So either the Texel or the code sell by just using a position absolute and a top of zero and a right
of zero.
So pretty simple, straightforward way of doing this.
So I will add in a position of absolute.
A top of zero and a right of zero.
Kill it, save all this.
Look back over and now it looks like, well, in the case of the Kozel, we've got this working.
So what's going on here?
Well, just remember, unfortunately, we don't have any other elements right now with a position of
relative.
Whenever you put in a position of absolute, that element will be positioned relative to the closest
parent that has a position of relative.
So right now, we're actually seeing all four different action bars stacked up on top of each other.
So we need to go back into our different cell definitions and to each of them, we need to add in a
class name or add an access rule to give these things a position of relative.
We could add in those exact rules to our code cell and our text ed components.
Or alternatively, we could just add it into the.
Sell list item, which is what is wrapping the Texel and the code Kozel.
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
top level div inside there a class name.
Of cell list item, and then we will create a file for this component as well.
So I'll create a new and punch directory, a new file of cell list item access.
Go back over to our component at the very top.
Import sell list item CSFs.
And then finally, inside of that access file cell list item, and we'll give it that position of relative.
So if we save all this once again, flip back over and refresh.
Now it appears that the buttons are nowhere to be found.
Well, again, just a little bit of a gotcha.
The buttons are here.
They're just being rendered behind whatever content we're displaying.
So in the case of, say, the text cell right here, there is an action bar behind that thing.
And if I inspect that element right there, I can see that there is the card content.
If I go up to the parent, there's the smallest item.
And inside there, there is definitely an action bar.
Again, it is just hidden behind the actual text ed thing itself.
To fix this up, we can just apply a Z index.
There's technically another way we can fix this.
We'll take a look at it in just a moment.
First to show you yet we could definitely do a Z index to fix it.
Alternatively.
If we go back over to our sell list item, we can just swap the order of action bar and child.
So if we show action bar after child, that means the action bar is going to have priority for being
displayed on top.
So I can save this now.
Look back over refresh and now will always be displayed on top.
The one downside about this approach is that whenever I see laid out like this, my kind of natural
inclination is that I'm going to have a child and then show the action bar after it.
But we are applying some CSFs that kind of inverts or flips that relationship.
Success is going to show the action bar on top or kind of like first at the top right hand corner.
So flipping the order here.
Not perfect, but honestly, it's a little bit more optimal or more ideal compared to the alternative.
The alternative is to use the index, which as much as possible we generally want to avoid.
So I'll say that this is a good enough solution for now.
OK, so we've got these action bars being displayed, but once again, just remember, if we are displaying
them with a code editor, we want to have that nice kind of dark background or that bar up top.
We still have just a little bit more work to do.
Let's take care of this last step in just a moment.