Bootstrap 3.2 popover not positioned properly when moving target element

As the title says, I am having trouble loading the Popuppost to properly position the location where the target is placed. Demo Bootply:

http://www.bootply.com/xqA2bb2mkJ

The bottom line is I am trying to create a top nav bar where one of the rightmost elements shows a popover when clicked. As you can see in the demo, the popover appears in the appropriate place, but the arrow is a smack-dab in the middle of the popover window, not at the top where it should be.

If float: right; the instruction is removed from the .wrapper element, then the caption appears.

I messed up the content in the popover itself to see if it affected things, but it looks like it doesn't. For example, setting html: true or html: false makes no difference. The presence or absence of HTML content in the popover doesn't seem to make any difference.

Also, placing the target in the Bootstrap HTML structure (container> strings> col-xs- * etc) doesn't solve the problem. In fact, I started with a target within that hierarchy, saw an error, and then removed the anchor from the said hierarchy in the hopes that this was just some CSS clash I had to overcome. Alas, this does not seem to be the case.

I hope this is stupid of me. Any help is appreciated!

+3


source to share


2 answers


It looks like the .popover needs a width determined when it was pressed to the far right, I tried applying .popover { width: 150px; }

it and it looked correct now.



Look at the fork: http://www.bootply.com/Qnk0F0CsVl

+4


source


You seem to be describing Bootstrap bug # 14197 which will be fixed in Bootstrap v3.2.1.



+2


source







All Articles