CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
Tom O'Brien
Tom O'Brien

Reputation: 1831

UI Bootstrap Popover With Template Moving/Jumping When Mouse Moves

I've created a UI Bootstrap popover for sharing content to different social networking sites. It uses a template.

After clicking the 'share' icon, the popover opens. However, it opens well to the right of where it should open, and when I then move the mouse it suddenly moves (quite a way) to where it should have originally opened. Which is all extremely weird.

The html looks like this:

<div class="category-header-top">Anthropology
  <img class="share-icon-svg" uib-tooltip="share" tooltip-placement="top"
    tooltip-is-open="shareTooltipOpen" ng-click="shareIconClicked()"
    popover-template="'sharePopoverTemplate.html'" popover-is-open="sharePopoverOpen"
    popover-placement="bottom" popover-append-to-body="true" src="share.svg">

  <script type="text/ng-template" id="sharePopoverTemplate.html">
    <div class="share-popover-div"><!--
      --><img class="share-svg" src="facebook-24px.svg"><!--        
      --><img class="share-svg" src="twitter-24px.svg"><!--
      --><img class="share-svg" src="gplus-24px.svg"><!--
      --><img class="share-svg" src="linkedin.svg"><!--
      --><img class="share-svg" src="pinterest.svg"><!--
      --><img class="share-svg" src="tumblr.svg"><!--
      --><img class="share-svg" src="reddit.svg">
    </div>
  </script>   
</div>

I've mocked up a plnkr that show the exact problem in all it's glory. http://plnkr.co/edit/I5YvW1mgCYx4uDcegL4u

Any ideas how to stop this?

Upvotes: 1

Views: 868

Answers (1)

chrisheninger
chrisheninger

Reputation: 181

Try adding a width attribute to each individual img tag.

<img class="share-svg" src="facebook-24px.svg" width="24">

This will allow the share-popover-div to properly calculate its size/position based on the childrens' width before the icon imgs have loaded, hopefully preventing the jumping.

Upvotes: 3

Related Questions