- Read Tutorial
- Watch Guide Video
So let's take look at the final item that we need to take care of in this guide, which is cleaning up the overflow with a few of those icon dropdowns. So, if you open up your modal right now, and you click on the image uploader, you can see that that causes us to have to scroll to the right, which is definitely a bad user experience in a modal like that, and the same thing happens with the emoji, and even the embedded link.
Everything else besides that works fine, so we just need to fix these three. Now, in a regular application, where this is maybe in just a normal form, kind of like our portfolio form is, this wouldn't be an issue, because it wouldn't be pushing over to some side that a user can't see. But in our case, it is, because it's in a modal.
So, what we can do is we can actually override the default values, and you have a couple of different options. One, you could go and change the core CSS file, which, if you open up Visual Studio Code, and you go into it, I believe it's called draft.js, yes, react-draft, what you see is what you get editor, react-draft-wysiwyg.scss and we could go into this source file and make the changes.
But that is something that's typically frowned upon, especially in CSS, and the reason for that is because of CSS's just cascading nature, we have the ability to override values very easily, and so, what I think the better approach is gonna be is going to be to find those classNames and then add them to our rich text editor SCSS file.
And this way, we can override it, and that's actually what we did with the DraftEditor-root class already there, so we've already kind of started this process. So let's see how we can do this. If you click on the link here, what we can do is right-click on the dropdown itself, click Inspect, and that's going to highlight the exact class that we wanna work with, this rdw-image-modal, and you can play with this a little bit here in element.style, so I could say something like, left, and let's set that equal to negative pixels, and you can see, that moved it perfectly.
And if you hit the up and down arrows, that'll actually change one pixel at a time, so you can change this to be whatever you want. Looks like 215 pixels would be perfect for that, so I'm going to click this rdw-image-modal class and in Visual Studio Code, in our rich text editor, I'm going to select that, and I'm going to add that style, that new override of left, -215 pixels.
rich-text-editor.scss
.rdw-image-modal {
left: -215px;
}
Hit Save, and now if you come back, get out of the modal, hit Refresh, this should be working, so if I click on the image, yes. You can see the dropdown is now in sight. It no longer causes that overflow, so that's perfect.
Now, we can do the same thing with the emoji here, so I'm going to click on the emoji dropdown. It looks like the class name is rdw-emoji-modal, and for this one, let's say the left is going to be -150 pixels, that looks like it's taking us close there. If I keep on adding some, looks like 169 pixels puts us right in line, so I'm going to grab that class, select it, and add our override of -169 pixels.
.rdw-emoji-modal {
left: -169px;
}
Then we just have one more that we need to change, so let's go and grab this embed link. Same thing, click on the inspector, click on the dropdown itself. If you do not grab the right class, you're not gonna be moving and selecting the right thing, so it looks like rdw-embedded-modal is what we're looking for, and for this one, let's say left, and then -100 pixels, that's taking us close, and yes, 124 pixels looks like a winner. I'm going to select rdw-embedded-modal, add that, -124 pixels.
.rdw-embedded-modal {
left: -124px;
}
Hit Save, and now let's hit Refresh, and just test all of them, make sure that those have all populated. Click on them and yes, now our set of toolbar items looks good, looks professional.
And this also answers a common question that I get, because you'll read many things in blog posts and in tutorials where developers say, never use negative values. Usually, when you're using a negative value, it means that you are not applying the correct style to that element, or you're trying to kind of force a style instead of doing it the right way, and that is the case in most scenarios.
However, one scenario where it is a good idea and where it is really the best approach is when you're working with someone else's entire component, like we're doing with draft.js right here, and you're simply performing a very small override. So all we're doing here is we're just flipping the side, and where, the actual absolute positioning on where we want this to show up on the screen, so in this case, this is a good example of where a negative value as a style is perfectly fine.
So, great job if you went through with that. Now our modal is 100% done, we do not have to touch this for the rest of the course, and so now with all of this in place, I have a little treat for you. At least, I think it's a treat. It was fun to build and it's a fun one to build out, and that is, we have the ability to create, we don't have the ability to update.
And yes, we could build a blog manager, just like we did with the portfolio, but that wouldn't really be teaching you a new skill. It would just be reinforcing what we already did. What I would rather do is teach you how to create a click to edit functionality.
That's something that I have seen quite a few people needing to build into React applications, so what that's going to do is, it's gonna give you the ability to come to a blog post and assuming you are the admin, you can simply click on any of the items, and it's going to take our blog detail page and it's gonna convert it into the blog form. It's gonna be pretty cool, I think it's gonna be a fun one to build out, so that's what we're gonna do in the next section.