CSS Pseudo Element (Triangle Outside The Tr) Position Misaligned When Scrollbar Appears

css pseudo element (triangle outside the tr) position misaligned when scrollbar appears

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

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 pseudo element (triangle outside the tr) position misaligned when scrollbar appears

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

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>

PrimeNG table header misaligned with scrollbar when adding rows dynamically

I have fixed it.

Just needed to make use of spread operator (...)

Need to add below line at the end of the clone event.

this.cars = [...this.cars];

Updated stackblitz

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

---

To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.

---

To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

---

Related Topics