Ngx-bootstrap: Add options for popover left/right and top/bottom alignment

[shainanigans]

Bug description or feature request:

In version 3, it was possible to have a popover placed to the left but aligned to the top of its trigger rather than the middle, even when container is set to "body" by using the transform property. In version 4, because the inline positioning uses transform, external CSS can't be used to align the top of the popover with its trigger when it's placed to the left or right. Any use of the transform property overrides the y-value of the inline transform, which is needed for vertical positioning. Similarly, I used to be able to left-align or right-align bottom- and top-placed popovers, but no longer can because I can't override the inline transform without breaking the placement.

I don't know why the change was made to the inline styles, but it would be great if either:

• It could go back to top/right/bottom/left positioning, freeing up the use of the transform property for custom alignment, or
• An alignment property could be added to control whether top/bottom popovers are aligned to their triggers' left, middle, or right, and whether left/right popovers are aligned to their triggers' top, centre, or bottom.

[Domainv]

@shainanigans Please try position 'left start' from [email protected]

[shainanigans]

Hi @Domainv , I've upgraded to 4.3.0 and tried "left start" but unfortunately that only changes the vertical alignment of the arrow and not that of the popover itself.

What I'm hoping for is something that has the arrow towards the top as it does when I used "left start" but that the popover itself also shifts to be top-aligned with the element that triggered it rather than centre-aligned. Hopefully that makes sense.

[Domainv]

Old functionality worked incorrectly.
Sorry, but for now we don't plan to add the functionality.

[EoinGriffin-AI]

@Domainv This should really be in the documentation. If it weren't for @shainanigans asking this question there's no way to know about the start option.

[MikaelLambert]

I was able to restore the original version 3 behavior in version 4.3.0+ for my project using start and end.

This is indirectly documented in code here:
https://github.com/valor-software/ngx-bootstrap/blob/e79019652e82dfb4dbf802960a3315d4e45ad699/src/positioning/modifiers/initData.ts#L16

In the end, the translation was:
bottom left => bottom end
bottom right => bottom start
top left => top end
top right => top start

left bottom => left start
left top => left end
right bottom => right start
right top => right end