CODEWITHSUNDEEP
cssvuetify.js
bendytree
bendytree

Reputation: 13629

Custom z-index for v-dialog

When I use Vuetify's v-dialog, my page's heading is positioned on top of the dialog. For example:

enter image description here

I can't easily change the heading's z-index since this is an old codebase. So I tried to override the dialog's z-indexes like this:

.v-overlay { z-index: 20001 !important; }
.v-dialog__content { z-index: 20002 !important; }

This works visually, but now "click outside to close" doesn't work. Here is an example:

Vue.use(Vuetify);

var vm = new Vue({
  vuetify : new Vuetify(),
    el: "#app",
  data: { dialog: false },
});
.banner {
  position:fixed;
  left:0;
  right:0;
  height:20px;
  background-color:red;
  /* z-index:1000; */
}

/** This fixes the banner, but now it won't close. **/
.v-overlay {
  z-index: 1001 !important;
}
.v-dialog__content {
  z-index: 1002 !important;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <div class='banner'>Banner</div>
    <div style="height:30px;">&nbsp;</div>
    <v-dialog v-model='dialog'>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs" v-on="on">Show</v-btn>
      </template>
      <v-card>
        <v-card-text>
          Click outside should close.
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-app>
</div>

Upvotes: 5

Views: 19625

Answers (2)

bendytree
bendytree

Reputation: 13629

This Vuetify update makes it simple:

<v-dialog v-model='dialog' style='z-index:20001;'>

The dialog, backdrop, and content will automatically get the z-indexes set correctly and the "click outside to close" works as well.

Upvotes: 8

user11809641
user11809641

Reputation: 895

It's kind of a hack, but you could add a class to the banner that is triggered based on the v-dialog's model, like so:

Vue.use(Vuetify);

var vm = new Vue({
  vuetify : new Vuetify(),
    el: "#app",
  data: { dialog: false },
});
.banner {
  position:fixed;
  left:0;
  right:0;
  height:20px;
  background-color:red;
  z-index:1000;
}

/** Add a class to reset the z-index to inherit (or whatever works with your code base) **/
.banner-dialog {
    z-index: inherit;
}

/** I removed the z-index from the core Vue component classes. **/
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    // Add a class here to trigger based on the v-dialog model
    <div :class="{ 'banner-dialog': dialog }" class='banner'>Banner</div>
    <div style="height:30px;">&nbsp;</div>
    <v-dialog v-model='dialog'>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs" v-on="on">Show</v-btn>
      </template>
      <v-card>
        <v-card-text>
          Click outside now closes!
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-app>
</div>

Upvotes: 1

Related Questions