Search code examples
jquerycssvue.jsz-index

vueJs - z-index not working for child div inside v-dialog

I have brought a span to show loading image inside v-Dialog of vuejs screen. Since the v-dialog has z-index of 220 which is inline style, my new span (loading image) is coming below the v-dialog. I have tried everything but its not working.

I need to show loading image above the v-dialog

image

console source

Solution

  • Method 1:

    Put your loader element inside the v-dialog component:

    <v-dialog>
  <v-card>
    <div class="loader"/>
    ...

    .loader {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

    Method 2:

    Put your loader element in the root component and set the highest z-index you are using in your app so it's displayed above all elements:

    App.vue

    <div id="app">
  <div class="loader"/>
  ...

    .loader {
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}