Modals in Inertia
This episode is for members only

Sign up to access "Modals in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
05. Customising individual modal containers

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
So this is going to be a really super quick tip here. We want to be able to customize our modals from outside of the container.
00:07
So let's just take a look at the modal that we've created here. We've set a max width of medium. What happens if we wanted a slightly larger container, like this?
00:17
Well, we can't really control this from each individual modal at the moment. Now, you might be thinking, well, over in our example here, surely we could just apply some classes directly to here.
00:28
So we could set a max width of large. Let's do extra large just so we can see the difference. But that doesn't do anything. By default in Vue, when you pass a class down
00:38
and it's inherited, this will be inherited at the very root level, which at the moment is just our transition route. So that's not really any good. Now, to get around this, what we can do
00:48
is choose specifically where we want these attributes to be inherited to. And that is our dialog panel. We want to override any of these styles on here.
00:58
We're not really concerned about overriding the overall transition or the background or anything like that. The dialog panel is the thing that we want to style up.
01:05
So to do this, we just use vbind. And then we take in the attributes that get passed through to this overall modal component, which are here.
01:15
And they will then get put into this part here. So this will bind in and override the classes or add, at least, the classes that we choose. So now, when we come over, you can see at the moment
01:27
that this is not quite right. The reason for this is what we would have to do is override these with important selectors. There are ways that we can get around this.
01:36
But the majority of the time, your modals are just going to be the same size. But in our case, we are going to override this. Now, you could get around this by not including things
01:46
that you're going to generally customize a lot. So for example, you could get rid of max width medium. And you could always have this to provide the width of this. So you could just have that as a general thing
01:57
that you have to implement. So if we didn't implement this, it would just look like this. And then, as a developer, when you're creating a new modal, you would come in and say, well, I
02:06
want a max width of medium for this particular one. And then you could apply the styles. So it's really up to how you're going to build this. But the majority of the time, we're
02:14
going to keep the same width. So I'm going to include this in here. And then I'm going to override this with an important just for this instance of this modal.

Episode summary

In this quick episode, we're focusing on how to customize individual modal containers—like if you want to change the width or styles for one specific modal, instead of all of them.

First up, we look at the standard way a modal is set up, usually with a fixed max-width (like "medium"). But what if you want one modal to be bigger? Simply adding a class directly to the modal won't work as you might expect in Vue—the class just gets applied to the root, not to the specific panel you care about.

To fix this, we'll show how to use v-bind to pass any attributes directly onto the dialog panel itself. This means you can now set custom widths or whatever styles you like, and they'll only apply to the panel for this modal. We'll also chat about some caveats around using !important if the styling doesn't take effect right away, and suggest a couple of best practices depending on how flexible you want your modals to be.

By the end, you'll know exactly how to give each of your modals a unique look when needed, without affecting the others.

Episode discussion

No comments, yet. Be the first!