Question

我创建了一个UI Bootstrap popover，用于将内容分享到不同的社交网站。它使用模板。

单击“共享”图标后，弹出窗口将打开。然而，它打开到它应该打开的位置的右边很好，然后当我移动鼠标时它突然移动（相当一种方式）它应该最初打开的位置。这都非常奇怪。

html看起来像这样：

<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>

我嘲笑了一个显示其所有荣耀的确切问题的人。 http://plnkr.co/edit/I5YvW1mgCYx4uDcegL4u

如何阻止这种想法？

Answer 1

尝试为每个单独的img标记添加width属性。

<div class= "tables">
    <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
     <option value=""></option>
     <option value="United States">United States</option>
     <option value="United Kingdom">United Kingdom</option>
     <option value="Afghanistan">Afghanistan</option>
     <option value="Aland Islands">Aland Islands</option>
     </select>
    </div>

  ////////////////////////////////////////////////////////////////
  $.ajax({
      url: "http://"+serverAdd+"/php_includes/sms_scaleSub.php",
      timeout: 5000,
      type: "GET",
      data: {"do" : "table"
    },
    dataType: "jsonp",
    success: function (data_table) {
      //alert(data_table);
      var table = data_table;
      $('.tables').html(table);
    },

    error: function (jqXHR, textStatus, errorThrown) {

      alert("ERROR: CONTACT YOUR ");
    }
  });
});

这将允许share-popover-div在图标imgs加载之前根据孩子的宽度正确计算其大小/位置，希望防止跳跃。

当鼠标移动时，UI Bootstrap Popover与模板移动/跳跃

1 个答案: