pivot filter box position

[CraigMeng]

Hi,

Awesome work!

Recently in my project, I found that pivot filter box will be out of view port. Line 214, inn the file PivotTableUI.js, I saw the position is the absolute distance. However, seems that react-draggable is using relative distance from parent dom (Not sure, though)

[nicolaskruchten]

Glad you like it! Can you explain how to reproduce the behaviour you're seeing? OS, Browser, window size?

[CraigMeng]

Hi,
I can reproduce this issue together with Bootstrap.css

DataTable.js:

As you can see, I put two data tables on one page, if you click the filters on second table, you would see the filter box is positioned out of the viewport. (Browser: 63.0.3239.84 (Official Build) (64-bit), screen resolution: 1900*1200)

[nicolaskruchten]

Does the solution proposed in nicolaskruchten/pivottable#865 work for this issue as well?

[steventebrinke]

In our app, the pivot table is embedded in another layout and also the filter box position is off (it's too far down). The proposed solution does not change anything in our case.

[kaiatgithub]

I had the same issue (position too far down) and fixed it by removing the top- and left-attributes in PivotTableUI.jsx on line 58 and 59 (see here).

[claudio-rodriguez]

Working on moving from pivottable to react-pivottable, getting the same issue, removing top and left attributes fixes the filter position for me too!

[nicolaskruchten]

I don't doubt that people are having this issue, but so far no one has ever shown me a reproducible example so I can fix it! I'm not going to accept pull requests to just remove working code :)

[nicolaskruchten]

Note: screenshots of code don't really help me... I'm not going to retype it all to make it run in my browser :)

[claudio-rodriguez]

hey, thanks for the follow up! I was able to reproduce the issue in a codesandbox: https://codesandbox.io/s/6w7x5q74nr

I reproduced something like what we have in our page, we have a left panel with some sort of list, then in the right panel we have some bootstrap tabs, a data table and then in another tab the pivottable, at first I only added the tabs and the issue wouldn't show, then, when I added the left and right panel thing the issue showed, so it is related to having the pivottable inside bootstrap columns.

hope this helps solving the issue!! :)

[umed]

hi @nicolaskruchten , do you have any progress on this issue? I have the same problem and I can reproduce it using
@claudio-rodriguez 's example.

Thanks in advance!

[nicolaskruchten]

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