Vuetify use v-dialog components inside v-card-actions without causing padding issues

Question

You can see the issue I'm having here:

https://codepen.io/ryanrapini/pen/LYeWZKR?editors=1010

Essentially, I have several dialogs which I have contained into their own custom "vue components" i.e. order-dialog.vue. In an ideal world, I could simply include this <order-dialog> component wherever I need it, and it would render the activator button and then handle all of the dialog state inside the component, so the parent doesn't need to worry.

Unfortunately, if I do this in a v-card-actions section I get spacing issues. Is this a bug with Vuetify or am I doing something wrong?

I thought that by moving the activator out of the <v-dialog> tag it might fix the issue, but it still doesn't unless I break my component up into a v-dialog component and a separate activator, which means I now need to manage the state of the dialog in the parent.

Thanks for any help.

Answer 1

I don't think you are doing something wrong, and I'm not sure that it's a Vuetify bug.

This comes from CSS rule in Vuetify library:

.v-application--is-ltr .v-card__actions>.v-btn.v-btn+.v-btn {
    margin-left: 8px;
}

I think the authors assumed that this block should contain only buttons. But in your case (in 2nd and 3rd approach) an output HTML looks like this:

<div class="v-card__actions">
  <button class="v-btn ...">
    ...
  </button>
  <div class="v-dialog__container"><!----></div>
  <button type="button" class="v-btn ...">
    ...
  </button>
  <button type="button" class="v-btn ...">
    ...
  </button>
</div>

So v-dialog__container breaks this rule.

You can fix you issue, by example, with an additional rule:

.v-application--is-ltr .v-card__actions>.v-btn:not(:first-child) {
    margin-left: 8px !important;
}

Or you can also apply helper classes (ml-2) into specific buttons.