CODEWITHSUNDEEP
csstwitter-bootstrapangularjspopover
Sneaksta
Sneaksta

Reputation: 1061

Bootstrap Popovers are not positioned correctly

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:

enter image description here

How can I fix the popovers so that when the height is adjusted, the anchor point stays the same?

Upvotes: 3

Views: 11893

Answers (3)

Danield
Danield

Reputation: 125581

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.

Upvotes: 1

ɐsɹǝʌ ǝɔıʌ
ɐsɹǝʌ ǝɔıʌ

Reputation: 4512

Try this:

.popover{position:fixed;}

Upvotes: 4

user2618352
user2618352

Reputation: 114

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.

Upvotes: 1

Related Questions