Vuetify select dropdown inside datatable creating position issue

Question

I'm using Vuetify datatable having 20 columns. It is working as expected. If the datatable has many columns, with the help of horizontal scrolling we can view all the columns

I want filters for each column in header, used v-slot:header and achieved that too.

The issue i'm facing right-now is when we click on select box, the dropdown opens, at the same time, when you do horizontal scrolling. The position of dropdown is not sticky with the select box, it just hanged in screen

The codepen to produce this issue: https://codepen.io/chansv/pen/OJygmjL

Steps to reprodcue:

open the above codepen

click on select box in header

make the dropdown open

now scroll the datatable horizontally using side arrow

The dropdown is not sticks to the select box

This problem is not with vertical scrolling, only in horizontal scrolling this issue exist

If anyone experienced the same, suggest me some idea to fix this

Here is the code:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
      hide-default-header
    >
      <template v-slot:header="{ props }">
        <th v-for="(head, index) in props.headers" :key="index"><div>{{head.text}}</div>
          <div>
            <v-select :items="items" placeholder="select from items"></v-select>
          </div>
        </th>
      </template>
    </v-data-table>
  </v-app>
</div>

th {
  min-width: 250px;
}


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      items: [
        "dessert",
        "calories",
        "iron",
        "fat"
      ],
      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' },
        { 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: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
})

Thanks in advance

chans chans · Accepted Answer · 2020-04-28T08:31:57

I've solved this issue by adding attach prop to

https://codepen.io/jkarczm/pen/XWmgajJ

<v-select attach :items="items" placeholder="select from items"></v-select>

Vuetify select dropdown inside datatable creating position issue

1 Answers