removed top and left of filter box

[chelseama]

No description provided.

[chelseama]

changed top and left attributes of filter box to address issue pivot filter box position #21.

[nicolaskruchten]

Thanks for this PR! Can you tell me a bit about where this is causing problems? Is it interacting badly with other CSS? It seems to work fine on the demo site...

[chelseama]

Hi Nicolas! Thank you for getting back to me.
When pvtFilterBox is displayed, it would make the most sense to me to have it under the pvtAttr.
Currently, the position of pvtFilterBox is far from the pivot table because of top and left attributes set in line 144 and 145. I will show you how pvtFilterBox is being displayed.

[chelseama]

This is what I am trying to obtain.

[nicolaskruchten]

Ah, so I'm not seeing the same thing at all... If you go here https://react-pivottable.js.org/ and click on the triangle on macOS/Chrome you see:

This is what I've seen in every OS/browser combination I've tried... Do you see something different? If so, could you tell me about your OS/browser?

If not, then I suspect that there is other CSS on the page which is interfering with the built-in styles, and I would want to solve this problem in some other way than removing this code :)

[chelseama]

Thanks for this PR! Can you tell me a bit about where this is causing problems? Is it interacting badly with other CSS? It seems to work fine on the demo site...

Hi Nicholas! Thank you for your reply. I figured out why this is behaving differently. It is because top and left of filter box are relative to body element's position. If there is any element between body and table that has relative position, then filter box position is going to be positioned relative to the element with top and left calculated from body element's position.

To make the code more robust, I would like to suggest getting a position of the closest relative element (if there isn't such an element, then body element's position will be used).
i.e.
const bodyRect = document.body.getBoundingClientRect(); //(line 140 in PivotTableUI.jsx)

New suggested approach:
const relativeRect = event.nativeEvent.target.offsetParent.offsetParent.offsetParent.getBoundingClientRect();

What do you think about this approach? If you have other suggestions on this, please share with me :)

[chelseama]

Hi Nicholas! Hope this finds you well. I tried another approach because previous approach that I suggested is "hacky". This new approach is making pvtUi to have relative position and filter box uses pvtUi's position to compute its left and top. What do you think about this one?

[nicolaskruchten]

OK, I've played with this a bunch and I think that your original approach is the best way forward here. Thanks for your engagement on this! I'll likely just commit my own version of your first commit :)

[nicolaskruchten]

Fixed in https://github.com/plotly/react-pivottable/releases/tag/v0.8.0