[Vuejs]-Data table vuetify events and rendering is not proper for row per page drop down

by

0👍

I just checked one of Vuetify’s examples and there is no such issue. You can compare your configuration and styles with this one.

<v-data-table
      :headers="headers"
      :items="desserts"
      :sort-by="['calories', 'fat']"
      :sort-desc="[false, true]"
      multi-sort
      class="elevation-1"
    ></v-data-table>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 200,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',

        },
      ],
    }
  },
})

0👍

I think the issue might be due to the footer present at the bottom(I can see some black colored block) for which the z-index value might be higher. Due to which the dropdown is going below that footer.

Change the z-index value of the block to 0 and check If it works fine.

Leave a comment