当滚动条出现时,css伪元素(tr外的三角形)位置未对齐

Question

当滚动条出现时,css伪元素(tr外的三角形)位置未对齐

我有一个高度固定的面板,overflow-y:auto; 在这个面板中我显示表格,当用户点击其中一行时,行右侧的三角形显示工作正常,直到滚动条没有出现在表格列表中.如果有滚动条,则右侧的arraow会出现在面板下方.如何解决这个问题？

这是工作小提琴,我还在下面添加了完整的代码片段和问题的图像

(function() {

  'use strict';

  angular
    .module('app', [])
    .controller('TableController', function($log, $scope) {
      $scope.tables = [{
          "name": "one_table",
          "purpose": "test"
        },
        {
          "name": "one_",
          "purpose": "test"
        }, {
          "name": "two_",
          "purpose": "test"

        }, {
          "name": "three_",
          "purpose": "test"
        }, {
          "name": "four_",
          "purpose": "test"
        }, {
          "name": "five_",
          "purpose": "test"
        }, {
          "name": "six_",
          "purpose": "test"
        }, {
          "name": "seven_",
          "purpose": "test"
        }, {
          "name": "eight_",
          "purpose": "test"
        }, {
          "name": "nine_",
          "purpose": "test"
        }, {
          "name": "ten_",
          "purpose": "test"
        }
      ];
      $scope.tindex = -1;
      $scope.rowClicked = function(idx) {
        $scope.tindex = idx;
      }
    });
})();

Run Code Online (Sandbox Code Playgroud)

.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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

请帮我找到正确的方法.

另一方面,我们可以通过angular-custom指令实现这一目标吗？

Answer 1

diE*_*cho 0

最后，在我同事的帮助下，我通过自定义指令和一点 CSS 解决了这个问题。

在面板主体中添加自定义指令并计算单击行的位置和面板高度并重新定位箭头类（没有任何伪元素）。下面是完整代码

(function() {

    'use strict';

    angular
        .module('app',[])
        .controller('TableController', function($log, $scope) {
        $scope.tables = [
        {
          "name": "one_table",
          "columns": [
            {"name": "id"},{"name": "f_name"}           
          ]
        },
        {
          "name": "one_",
          "columns": []
        }, {
          "name": "two_",
          "columns": []
        }, {
          "name": "three_",
          "columns": []
        }, {
          "name": "four_",
          "columns": []
        }, {
          "name": "five_",
          "columns": []
        }, {
          "name": "six_",
          "columns": []
        }, {
          "name": "seven_",
          "columns": []
        }, {
          "name": "eight_",
          "columns": []
        }, {
          "name": "nine_",
          "columns": []
        }, {
          "name": "ten_",
          "columns": []
        }
      ];
      $scope.tindex = -1;
      $scope.rowClicked = function (idx) {
        $scope.tblRowClicked = idx;
        $scope.tindex = idx;
      }
    }).directive('showArrow', function($window, $timeout) {
            return {
                restrict: 'A',
                link: function(scope, element) {
                    // change the arrow position
                    var minHeight, maxHeight, maxWidth, tableHeight, style;
                    var row, rowPos, arrow;
                    var changeArrowPosition = function() {
                        $timeout(function() {
                            row = element.find('.hover');
                            rowPos = row.position(); // get position of clicked row
                            //console.log("rowPos:minHeight:maxHeight:tableHeight", rowPos, minHeight, maxHeight,tableHeight);
                            arrow = element.children('.dir-right');
                            arrow.hide();
                            if (rowPos) {
                                if (rowPos.top >= minHeight && rowPos.top <= maxHeight) {
                                    style = {"top": rowPos.top + "px"};
                                    arrow.css(style);
                                    // if table height is lesser than panel height
                                    if (tableHeight <= maxHeight && maxWidth > 435) {
                                        style = {"margin": "auto 5px"};
                                        arrow.css(style);
                                    }
                                    arrow.addClass('arrow-right').show();
                                }
                            }
                        });
                    };

                    element.on("click scroll", function() {
                        var elem = angular.element(this);
                        maxHeight = elem.height(); // panel height
                        maxWidth = elem.width(); //panel width
                        tableHeight = elem.children('table').height(); // table height
                        minHeight = elem.children('table').find('tr').eq(0).height(); // firt row height
                        changeArrowPosition();
                    });
                }
            };
        });
    
})();

Run Code Online (Sandbox Code Playgroud)

.panel-body {
    display: block;
    height: 230px;
    padding: 0px !important;
    overflow-x: hidden;
    overflow-y: auto;
}
table {
  width:100%;
  max-width: 100%;
}
tr {
  cursor: pointer;
}
tr.hover {
  background-color: #e5ee4f!important;
}
.arrow-right {
    border-bottom: 20px solid transparent;
    border-left: 20px solid #e5ee4f;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;
    clear: both;
    content: '';
    float: right;
    height: 0px;
    left: 96%;
    margin: 0px auto;
    position: absolute;
    width: 0px;
}

.dir-right {
    display: none;
}

Run Code Online (Sandbox Code Playgroud)

<!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.4.0/angular.min.js"></script>
<body ng-controller="TableController">
<div class="row">
  <div class="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" show-arrow>
              <table class="table table-striped">
                  <tbody >
                      <tr ng-repeat="table in tables track by $index" ng-click="rowClicked($index)" ng-class="tindex === $index ? 'hover' : ''">
                          <td>{{table.name}}</td>
                      </tr>
                  </tbody>
              </table>
              <i ng-if="vm.tblRowClicked === vm.tindex" class="dir-right"></i>
          </div>
      </div>
     </div>
   </div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是一个工作小提琴

希望它能帮助某人。

归档时间：	8 年，7 月前
查看次数：	411 次
最近记录：	8 年，3 月前