dropdown display incorrect positioning

[cldougl]

the dropdown menu appears below where it should be:

(note: not seeing the same behaviour in the local example)

cc @Marc-Andre-Rivet @wbrgss

[cldougl]

potentially related to how we calculate top https://github.com/plotly/dash-table/blob/master/src/dash-table/components/Cell/index.tsx#L273

[cldougl]

additionally, this seems to specifically appear when setting n_fixed_columns

[wbrgss]

I think it might be possible to avoid calculating top and left offsets with JS, and let the browser calculate positioning with CSS. This should make this behaviour more consistent.

@Marc-Andre-Rivet Would anything prevent something this from working?

.Select.is-clearable.is-focused.is-open.Select--single {
    position: relative;
    overflow: visible;
}

Then on the child .Select-menu-outer, we can remove the top and left properties. And keep position: absolute. This is just some quick testing with dev tools so there may be a good reason I don't know about for explicitly calculating the absolute positioning.

[wbrgss]

IIRC we actually discussed this last month over a slack call. The problem with my solution above would be that dropdowns get cut off on lower rows unless the user scrolls down.

[Marc-Andre-Rivet]

@wbrgss @cldougl I think having a relative parent will bring back the clipping issue due to the spreadsheet div having overflow: hidden