Vuetify select dropdown inside datatable creating position issue - css

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

Answer 1

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>