我有一个面板,高度固定,溢出-y：auto;在这个面板中,我正在显示表格,当用户点击其中一行时,行右侧的三角形显示正常工作,直到滚动条未出现在表格列表中.如果有滚动条比右侧arraow出现在面板下方.如何解决这个问题？
这是Working Fiddle,我还在下面添加了完整的代码片段和问题的图像
(function() {
'use strict';
angular
.module('app',[])
.controller('TableController',function($log,$scope) {
$scope.tables = [{
"name": "one_table","purpose": "test"
},{
"name": "one_",{
"name": "two_","purpose": "test"
},{
"name": "three_",{
"name": "four_",{
"name": "five_",{
"name": "six_",{
"name": "seven_",{
"name": "eight_",{
"name": "nine_",{
"name": "ten_","purpose": "test"
}
];
$scope.tindex = -1;
$scope.rowClicked = function(idx) {
$scope.tindex = idx;
}
});
})();
.panel-body {
display: block;
height: 230px;
overflow-x: hidden;
overflow-y: auto;
}
table {
width: 100%;
max-width: 100%;
}
.arrow-left:after {
border-bottom: 20px solid transparent;
border-left: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
clear: both;
content: '';
float: right;
height: 0px;
margin: 1px auto;
position: absolute;
right: 8px;
width: 0px;
}
<!DOCTYPE html> <html ng-app="app"> <head> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <body ng-controller="TableController"> <div class="row col-md-12"> <div class="col-md-4" data-define="tables"> <div class="panel panel-default"> <div class="panel-heading"> <span>Tables</span> </div> <div class="panel-body no-padding"> <table class="table table-striped"> <tbody> <tr ng-repeat="table in tables track by $index" ng-click="rowClicked($index)" ng-class="tindex === $index ? 'arrow-left' : ''"> <td>{{table.name}}</td> <td>{{table.purpose}}</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
请帮我找到正确的方法.
另一方面,我们可以使用angular-custom指令实现这一目标吗？
解决方法
看起来伪元素没有被正确定位,即使tr被赋予了一个位置：relative
可以通过将伪元素添加到td来修复此问题.
<tr ng-repeat="table in tables track by $index" >
<td ng-click="rowClicked($index)" ng-class="tindex === $index ? 'arrow-left' : ''">{{table.name}}</td>
</tr>
并稍微改变CSS：
table tbody tr td {
position: relative;
}
.arrow-left:after {
border-bottom: 20px solid transparent;
border-left: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
clear: both;
content: '';
float: right;
height: 0px;
margin: 1px auto;
position: absolute;
top: -3px;
right: -18px;
width: 0px;
}
我不确定是否将click事件移动到td是一个解决方案.
更新
要使用多个td,请按以下方式更新CSS：
table tbody tr td {
position: relative;
}
.arrow-left td:last-of-type:after {
border-bottom: 20px solid transparent;
border-left: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
clear: both;
content: '';
float: right;
height: 0px;
position: absolute;
top: -2px;
right: 0;
width: 0px;
}
