对溢出的文本进行设置时,角度uib弹出窗口显示在错误的位置
Angular uib-popover displays in wrong position when set on overflowed text
我在这里有一个问题的工作示例:http://plnkr.co/edit/vwZS5e?p=preview
以下是问题范围:
<div class="test-container">
<span uib-popover="Test"
popover-placement="top"
popover-trigger="mouseenter"
popover-append-to-body="true">
MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe
</span>
</div>
当我把鼠标悬停在这个跨度的中心时,我试图在它上面显示一个弹出窗口。当文本太长时,我会使用文本溢出来截断它。但似乎uib popover并没有解释溢出的原因。。popover看起来太偏右了。
这是我的css:
.test-container {
text-overflow:ellipsis;
overflow:hidden;
width:100px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
}
我知道我可以把popover放在测试容器div上,但我更喜欢popover在跨度的中心。
有人知道如何解决这个问题吗?
<span>
是inline
元素,inline
元素的width
取决于其内容。如果要添加更多内容,其宽度将增加,反之亦然。
在上述情况下,即使没有空格,也会有很长的文本字符串。如果你检查你的<span>
,你会发现<span>
的width
比它的父.test-container
的width
大得多。
CCD_ 10根据CCD_ 12的CCD_。如果你增加或减少<span>
元素的含量,你也会看到uib-popover
的位置发生变化。
您可以通过将<span>
设置为block
元素并在其上移动文本剪切属性来解决此问题。
(function(){
'use strict';
angular
.module('app', ['ui.bootstrap', 'ngAnimate']);
})();
(function(){
'use strict';
angular
.module('app')
.controller('appController', AppController);
AppController.$inject = ['$log', '$timeout'];
function AppController($log, $timeout) {
var vm = this;
return vm;
}
})();
html,
body {
background-color:darkgray;
}
.test-container {
width:100px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
}
.test-container span {
text-overflow:ellipsis;
overflow:hidden;
display: block;
}
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app" data-ng-controller="appController as vm">
<div class="test-container">
<span uib-popover="Test"
popover-placement="top"
popover-trigger="mouseenter"
popover-append-to-body="true">
MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe..MouseoverMe
</span>
</div>
</div>
相关文章:
- 谷歌地图API-信息窗口显示谷歌位置API信息
- 如何使用 javascript 警报窗口显示验证消息
- 使用模式消息/窗口显示数据库记录
- 单击按钮并将其下载为图像格式时,如何使用引导模式弹出窗口显示D3图表
- 为什么我的html弹出窗口显示我的函数的文本,而不是运行它们
- 如何让角度引导弹出窗口显示字典值
- 当子窗口打开时,父窗口显示为灰色
- 如何检查是否允许弹出窗口显示在客户端的浏览器中
- 同步窗口.显示()
- 简单模式弹出窗口显示每个会话一次
- 谷歌api信息窗口显示在谷歌地图api上的1个标记下
- 单击传单中的标记时,如何防止弹出窗口显示
- 点击警报窗口显示
- 如何使用ajax的Magnific弹出窗口显示测验
- 在弹出窗口打开之前,模式弹出窗口中的Elevate zoom缩放窗口显示在内容后面
- 对溢出的文本进行设置时,角度uib弹出窗口显示在错误的位置
- 你能控制用Javascript创建的窗口显示在哪个显示器上吗
- 在双显示器上复制弹出窗口显示
- 信息窗口显示在同一标记上
- 模式窗口显示得非常简短