Bootstrap: Arrow out of popover

[alecpl]

Popover arrow can be placed incorrectly when button on the edge of the screen.

Tested with most recent Bootstrap4 build.

[Johann-S]

Can you make a CodePen of this issue please ? As it mentionned in our contributing guidelines

[alecpl]

@Johann-S I thought it's obvious, but here you go: https://jsbin.com/horagubehe. See that horizontal as well as vertical position is buggy.

[Johann-S]

it seem's has a CSS problem because Popper.js position correctly our arrow but our arrow width is too high 🤔

yes @alecpl but that's easier for us to make a fix with a reproducible bug in live 👍

[FezVrasta]

@Johann-S: Popper.js already takes care to include the arrow width in its computations (theorically), make sure the most outer arrow element has the right width set.

edit:

looks like the problem is what I pointed above.
The arrow element should have the same width of the actual space used by the arrow to properly get positioned.

edit 2:

If you get rid of the .arrow:before, .arrow:after { left: -7px; }, set .arrow width to 22px and give it a margin-left: 5px; margin-right: 5px you get the proper placement.

Note that the correct width is needed to position the arrow properly, and the margins are used to always ensure some spacing between the arrow and the popover's edge.

[Johann-S]

Thank you so much @FezVrasta 👍 if you want to do that changes do not hesitate

[alecpl]

Maybe #23820 should be considered first.

[wojtask9]

Can you check this https://codepen.io/anon/pen/gxNxZw ?

I can make PR to fix this

Edit:
CSS changes with my (not sure if correct) fix for Popper.js

[wojtask9]

I didn't saw #23820
This PR should fix the issue

[wojtask9]

I was wrong. #23820 doesn't fix this issue.
https://codepen.io/anon/pen/ZJdLpW (css compiled with popover changes from #23820)

[Johann-S]

this CodePen : http://codepen.io/anon/pen/gxNxZw seems fine @wojtask9, isn't it ?

[wojtask9]

@Johann-S
Yes.
This pen contains my fix to Popper.js and css popover changes.
I'll make PR when I'll get back home

[jipexu]

this CodePen : http://codepen.io/anon/pen/gxNxZw seems fine @wojtask9, isn't it ?

the popover bottom left lost his left border ??

[wojtask9]

@jipexu
Something with popper position is wrong. I'm not sure what.

@alecpl
my PR https://github.com/twbs/bootstrap/pull/23936 that should fix your issues

[Johann-S]

It seems https://github.com/FezVrasta/popper.js/pull/489 fixe this issue, so when @FezVrasta will ship a new release of Popper.js we'll close this issue :+1:

[FezVrasta]

Released as v1.12.8

[Johann-S]

The new release of Popper.js fixe only one part of this issue see : https://codepen.io/Johann-S/pen/qVXEaX

But IMO the first issue is on our CSS here (see the first Popover)

[FezVrasta]

yes, you still need to perform the changes I described in this comment