出现滚动条时，css伪元素(tr之外的三角形)位置未对齐 [英] css pseudo element (triangle outside the tr) position misaligned when scrollbar appears

查看：88
本文介绍了出现滚动条时，css伪元素(tr之外的三角形)位置未对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个固定高度的面板，并且在此面板中显示overflow-y:auto;，当用户单击某一行时，该行右侧的三角形似乎可以正常工作，直到滚动条不出现为止表列表.如果有滚动条，则面板下方将显示右arraow.如何解决这个问题?

I have a panel which height is fixed and overflow-y:auto; in this panel I am displaying table and when user click on one of the row, triangle on right side of row appears that is working fine till scrollbar doesn't comes on the table list. if there is scrollbar than right arraow appears down the panel. how to fix this issue?

这是 

(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;
      }
    });
})();

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

请帮助我找到正确的方法.

Please help me to find the right approach.

另一方面，我们可以使用angular-custom指令来完成此操作吗?

on the other hand can we accomplish this with angular-custom directive ?

推荐答案

最后，我已经通过自定义指令和少量CSS在同事的帮助下解决了这个问题.

Finally, I have resolved this by custom directive and little bit CSS and with help of my colleague.

在 panel-body 中添加一个自定义指令，并计算单击行的位置和面板高度，并重新定位箭头类(不包含任何伪元素).下面是完整的代码

add a custom directive in panel-body and calculate the position of clicked row and the panel height and reposition the arrow class ( without any pseudo element). Below is full code

(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();
                    });
                }
            };
        });
    
})();

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

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

这是工作小提琴

希望它对某人有帮助.

这篇关于出现滚动条时，css伪元素(tr之外的三角形)位置未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆