Menu
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?
Here is the Working Fiddle and also I have added the complete code snippet below and the image with the 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.
on the other hand can we accomplish this with angular-custom directive ?
894
You need to position the :before pseudo-element absolutely by using the well known centering technique (use the top, left, and transform properties). Here, -25px will offset the text above the circle. Note that for the <span> element, we set the position property to its "relative" value and the display to "block".
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
CSS - The ::before Pseudo-element The ::before pseudo-element can be used to insert some content before the content of an element.
In general, if we want to change anything in pseudo elements through JavaScript, we do it in the following way: Create CSS classes on element, which will change pseudo elements' UI. Get the element using querySelector. Modify the classes using classList.
It appears that the pseudoelement isn't being positioned correctly, even when the tr is given a position: relative
This issue can be fixed by adding the pseudoelement to the td instead.
<tr ng-repeat="table in tables track by $index" >
<td ng-click="rowClicked($index)" ng-class="tindex === $index ? 'arrow-left' : ''">{{table.name}}</td>
</tr>
and altering the CSS slightly:
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;
}
I'm not sure if moving the click event to the td is a solution for you however.
jsbin
update
To work with multiple td, update CSS as below:
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;
}
jsbin
90
If you apply position: relative to the table element, the arrow won't escape the container. For some reason the spec says a position: relative on table-row and other table elements are undefined.
Here's the spec for more info: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
