Vuetify: [Feature Request] select dropdown inside datatable creating position issue

[chans-me]

Problem to solve

If the datatable has many columns, with the help of horizontal scrolling we can view all the columns

If we want filters for each column in header, using v-slot:header this can be achieved

The issue 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

Proposed solution

The codepen to reproduce 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

[jacekkarczmarczyk]

Use attach prop
https://codepen.io/jkarczm/pen/XWmgajJ

[chans-me]

@jacekkarczmarczyk , thanks for the quick response, What if I have a date picker in place of select box,

I'he added date picker in the same codepen https://codepen.io/chansv/pen/PoPjKxx?editors=1010

How do we handle in datepicker case

[jacekkarczmarczyk]

For menu it's a bit more complicated, but still doable

          <div v-if="index === 1" id="foo" style="position: relative">
            <v-menu
                    attach="#foo"

Unfortunately there's https://github.com/vuetifyjs/vuetify/issues/7384

[jacekkarczmarczyk]

https://codepen.io/jkarczm/pen/rNOwGaj?editors=1010

[chans-me]

https://codepen.io/jkarczm/pen/rNOwGaj?editors=1010

Thank you for the quick response. It worked

[chans-me]

https://codepen.io/jkarczm/pen/rNOwGaj?editors=1010

Can you please help me out with sticky headr on scrolling datatable https://stackoverflow.com/questions/61474945/sticky-header-on-scroll-in-vuetify-datatable

which should behave like this https://output.jsbin.com/zuzuqe/1/

[jacekkarczmarczyk]

Not supported now, maybe you can do it with custom css but i don't have solution

[chans-me]

@jacekkarczmarczyk , I got struck with your implementation. There is a scenario, when no data is present in table. The datepicker hides inside the table and not able to select date. This issue is due to attach property you suggested.

Without attach it is showing the datepicker, but the position is not sticky with the input field
Similarly in below codepen, please check the select box, the dropdown options are hide inside table and can't able to select

https://codepen.io/chansv/pen/XWmamRP?editors=1000

Can you please suggest on this issue..

[Tofandel]

The problem of attach is that well it attaches the component to the specified parent so it is subject to overflow issue.. So clearly it is not a viable solution and the problem lies in the position calculation in the first place. That likely should implement reactivity on scroll