Bootstrap Popovers are not positioned correctly

css twitter-bootstrap angularjs popover

10,811

Solution 1

Try this:

.popover{position:fixed;}

Solution 2

You'll want something like this:

FIDDLE

.bubble 
{
    position: absolute;
    left: -100px; /* -half width of bubble + half width of button */
    bottom: 100%; 
    margin-bottom: 15px; /* height of callout spike */
    width: 250px;
    min-height: 50px;
    padding: 5px;
}

From the image in the question it seems that the rule

margin-bottom: 15px; /* height of callout spike */

is the one that is missing.

Solution 3

It has the top position by default please make it bottom and adjust the position according to it. Then the height will increase upward and it will not affect your design.

10,811

Author by

Sneaksta

Updated on June 05, 2022

Comments

Sneaksta almost 2 years

I have been implementing some extra placements for bootstrap's popovers, and they are all working quite nicely. I am however having trouble with dynamic content in popovers.

The content is rendering fine and dandy, but if I use top positioning for the popover, and it's height changes (dynamically) according to it's content, the placement becomes wrong:

How can I fix the popovers so that when the height is adjusted, the anchor point stays the same?
- Zim almost 11 years
  
  Can you post your code?
- Sasidhar Vanga almost 11 years
  
  The top position of the popover should consider correct height of the popover content. Based on height of the popover set the top position. Are you setting the popover top first and then adding/changing content in it? Is there any chance to see current code or part of it?
- Sneaksta almost 11 years
  
  I'm really not using any custom code for the popover placement, just using the standard bootstrap plugin. I am however using angularJS code within the content area, so bootstrap doesn't know the height of rendered content I think. Is there away to fix this?
- BjornJohnson almost 11 years
  
  Which version of bootstrap? (Reason being, having access to events for popovers which exist in BS 3, like "shown", will make this a lot easier.)
- sulfureous almost 11 years
  
  I really think that a jsFiddle of this happening on a stock bootstrap would helps us help you solve it much faster. Also worth to note what version of bootstrap you are using because it changed quite dramatically from 2 to 3
- BjornJohnson almost 11 years
  
  I echo the call for a jsFiddle, specifically to show how angular is setting the HTML for the popover. Is that happening through a data-html attribute on the element that is triggering the popup? I started to set up my own fiddle, but it's kinda pointless without seeing how you've done it.
- Jon7 almost 11 years
  
  Are you using stock bootstrap or one of the two angular bootstrap libraries? I would certainly advise against using stock bootstrap in angular for popovers.
- Sneaksta almost 11 years
  
  Thanks for the comments! I will write up a jsFiddle some time tomorrow.
- JQuery Guru almost 11 years
  
  Hi,AngularStrap bootstrap popover implementation in angularjs this is the library url mgcrea.github.io/angular-strap/#/popover