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

Question

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

Answer 1

Did you expect like this.

(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 {

    color:#000!important;
  width: 100%;
  max-width: 100%;
}

.arrow-left:after {
    border-bottom: 15px solid transparent;
    border-left: 15px solid #eee;
   border-right: 15px solid transparent; 
    border-top: 15px solid transparent;
    clear: both;
    content: '';
    float: right;
    height: 0px;
    margin: 1px auto;
    position: relative;
    right: 8px;
    width: 0px;
}
.arrow-left1:after {
        border-bottom: 15px solid transparent;
    border-left: 15px solid #eee;
    border-right: 15px solid transparent;
    border-top: 15px solid transparent;
    clear: both;
    content: '';
    float: left;
    height: 0px;
    margin: 1px auto;
    position: relative;
    right: 0px;
    width: 0px;
}

  
  
  







  

    

      

        

          Tables
        
        

          

            

              

                
{{table.name}}
                
{{table.purpose}}
                

              
            
          
        
        


         

          

            

              

                
{{table.name}}
                
{{table.purpose}}
  
                
{{table.purpose}}