Vuetify linear progress bar value in data table row overlaps fixed headers

0
votes

  • Vuetify Version: all

  • Vue Version: 2.6.11

  • Steps to reproduce

    • Do a scroll and linear progress value will overlap FAT

  • Expected Behavior

    • Linear progress value must not overlap headers

Reproduction Link https://codepen.io/bnping/pen/mdVjqoz?editors=1010

     <v-data-table
    fixed-header
    height="70vh"
    :headers="headers"
    :items="desserts"
    :search="search"
  >
        <template v-slot:item.fat="{ item }">
    <v-progress-linear
      :background-opacity="0.3"
      :buffer-value="100"
      :height="25"
      :width="150"
      :rounded="true"
      :value="item.fat"
    >
    <div>{{ item.fat }}</div>
    </v-progress-linear>
  </template>
    
    
  </v-data-table>
1
vue.jsvuetify.js

1 Answers

1
votes

That is happening because your fixed header and items have the same z-index: 2

In your css code

    .v-data-table--fixed-header 
{
    ...
    position: sticky;
    z-index: 2;
}

    .v-progress-linear__content 
{
...
positon: absolute;
z-index: 2;
}

As you can see, you got the same z-index, but diferent positions both components.

You should try to modify those css classes and change their z-index (adding '!important' to overwrite other classes) like that:

   <style>
  .v-progress-linear__content {
    z-index:1;
  }
</style>