search

alexkatz / react-tiny-popover

A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.
MIT License
454 stars 121 forks source link

Is there a way to position the popover with left and top instead of using translate ? #145

Open jeffersonswartz opened 2 years ago

jeffersonswartz commented 2 years ago

Thanks for making this awesome plugin.

Recently I have migrated from v4 to v7, I have made all the necessary code changes to make it work, but during render the popup is positioning itself with CSS translate property which makes components inside the popover position differently. As the popover content is dynamic in our project it is not possible to change all the content components. So is there a way to use CSS left and top property to position the popover?

Thanks in advance.

hu1da commented 2 years ago

'translate' property makes it very problematic with some resolution on chrome because it moves all the time and it rerenders itself constantly. I resolved it locally by overriding translate property with top and left. Can you consider fixing this chrome bug in future releases, please?

tudor2004 commented 2 years ago

@hu1da how did you resolved it locally with overriding the translate property? can you provide an example

peteygao commented 1 year ago

Ditto on the issue experienced. Upgraded from v4 to v7 and the new translate positioning is causing positional rendering errors.

FYI for those investigating at home, this change was made during the switch to v6 (present in the earliest beta 6.0.0-beta release).

Will try to patch locally translate into top/left in a fork.

@tudor2004 The code for translate is here and here, presumably just replace it with top and left and that should work 🤷🏼‍♂️ .

EDIT: Created a fork, you can use it directly in your package.json via github:peteygao/react-tiny-popover-no-transform#3796802. The dist/ folder is included in master so it's pre-built.