uibpopup positioning issue

Question

uibpopup positioning issue

jrnorrisjr opened this issue 7 years ago · 9 comments

I am working on a version of Relay Hub that has a hamburger menu at the left side. When a view opens there is a button that uses the uib-popover to show a tooltip. When the view opens after clicking on the hamburger icon the tooltip overlaps the button. As soon as the mouse is moved the tooltip moves to the correct position. It may be coincidence but the amount it shifts to the right appears to be about the size of the hamburger menu. I attached a zip containing screenshots to show what is happening.
uibpopup.zip

Answer 1 · 2017-08-10T14:00:24.000Z

Can you share a link to the page via email so I can look into why the jump is happening?

I have a story to fix that tooltip being under the leftnav too (as you reported), looks like a z-index issue.

Answer 2 · 2017-08-10T14:42:25.000Z

Can you try setting the popover to popover-append-to-body="true"? If that doesn't work I'll have to create a plnkr to figure this out.

Answer 3 · 2017-08-10T14:44:21.000Z

I tried that before - don't remember what it did so I'll try it again. Think it went under the hamburger.

Answer 4 · 2017-08-10T14:46:58.000Z

OK, there is a really old thread on the the jumping here, will keep looking for a solution.

Answer 5 · 2017-08-10T14:51:53.000Z

Still the same behavior. Neil Sampson had me add an offset from the button. That doesn't work when the popover is appended to the body which is why I changed it back.

Answer 6 · 2017-08-10T15:00:20.000Z

BTW. using angular-bootstrap 2.5.0.

Answer 7 · 2017-08-10T15:24:38.000Z

Sending you a video via email...

When I remove the button animation, the popover displays in the correct position. As a temporary fix, you can remove the animation on this specific button using css animation-name: unset;

Answer 8 · 2017-08-10T15:36:34.000Z

Thanks for the help Dan. Much appreciated. The CSS animation setting did the trick.

Answer 9 · 2018-05-02T01:29:35.000Z

where / how do you apply this animation-name? I tried a style="" on the button that initiates the popover - my popovers fly in from the right awkwardly.