Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popup: positioning glitch when using negative vertical offset #3615

Closed
rijk opened this issue May 23, 2019 · 6 comments · Fixed by #3654
Closed

Popup: positioning glitch when using negative vertical offset #3615

rijk opened this issue May 23, 2019 · 6 comments · Fixed by #3654

Comments

@rijk
Copy link
Member

rijk commented May 23, 2019

Bug Report

Implementing the new Popper offset parameter (#3532), something weird happens:

(first is without offset, then with offset):

tooltip offset issue short

Steps

A Popup configured with

position="bottom center"
offset="0, -4"

(near the top of the page, that could have something to do with it).

Expected Result

Tooltip appears shifted up, but still in the same orientation (bottom center).

Actual Result

Orientation changes to top, making it very glitchy.

Version

0.87.1

Testcase

https://codesandbox.io/s/semantic-ui-react-2m6rb

As a workaround I tried to use the positionFixed parameter, but it doesn't appear to be passed to Popper.

@rijk
Copy link
Member Author

rijk commented May 26, 2019

Might be related to this:

NB: If you desire to apply offsets to your poppers in a way that may make them overlap with their reference element, unfortunately, you will have to disable the flip modifier. You can read more on this at this issue.

@layershifter
Copy link
Member

Good catch, we should expose modifiers from Popper.JS 👍

@layershifter layershifter changed the title Popper.js -> positioning glitch when using negative vertical offset Popup: positioning glitch when using negative vertical offset May 28, 2019
@TomDemulierChevret
Copy link

Any update on this ?

The 0.87.0 broke a lot of our popup that used this mecanism to render the content closer to the trigger.

@layershifter
Copy link
Member

layershifter commented Jun 10, 2019

@TomDemulierChevret @rijk please take a look on #3654. Craziness is stopped with pinned: true:

popup-pinned-fix

I also exposed Popper's modifiers as popperModifiers.

@TomDemulierChevret
Copy link

Perfect.

Do you know when the next release including this fix will be available ?

@layershifter
Copy link
Member

I am plan to have it on this week.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants