我创建了一个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
如何阻止这种想法?
答案 0 :(得分:3)
尝试为每个单独的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加载之前根据孩子的宽度正确计算其大小/位置,希望防止跳跃。