I am currently working on a project that involves creating a table with Angular data binding. My task is to include a pencil glyphicon in each row to indicate that the row is editable. However, I've encountered an issue with the placement of the glyphicon when using both the bootstrap table-striped class and the glyphicon-pencil class. It seems like the row is positioned behind the glyphicon, making it impossible to click on the icon itself. If I try adjusting the z-index to -1, the pencil only appears on the white rows and not the gray ones. I've tried various solutions but have been unsuccessful in getting the glyphicon to display correctly on alternating rows while maintaining clickability. The goal is for everything in the row above the glyphicon to remain clickable, including the pencil and the grid, which should lead to the next view.
Can someone offer assistance in resolving this issue? Any insights into what might be causing this problem would be greatly appreciated as I'm currently stuck and unsure how to proceed from here.
Below is the HTML code I have:
<div ng-controller="TestCtrl">
<div class="container" ng-hide="editing" style="margin-top:25px;">
<div class="row">
<div id="no-more-tables">
<table ng-show="test.length > 0" class="col-sm-10 col-sm-offset-1 table-bordered table-striped table-condensed cf">
<thead style="text-align:left">
<tr>
<th style="width: 27px;"></th>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th>Field 4</th>
<th>Field 5</th>
<th>Field 6</th>
</tr>
</thead>
<tbody>
<tr id="{{test.guidfield}}" ng-repeat="testing in test" ng-click="edit($event)" style="cursor:pointer">
<td><div class="glyphicon glyphicon-pencil" style="z-index:-1"></div></td>
<td data-title="Field 1"> {{test.field1}}</td>
<td data-title="Field 2">{{test.field2}}</td>
<td data-title="Field 3">{{test.field3}}</td>
<td data-title="Field 4">{{test.field4}}</td>
<td data-title="Field 5">{{test.field5}}</td>
<td data-title="Field 6">{{test.field16}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is the CSS code I've implemented:
/* ------- this media query makes tables display vertically on devices 768px or less ------ */
/* Force table to not be like tables anymore */
#no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th,
#no-more-tables td, #no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr {
border: 1px solid #ccc;
}
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 60%;
white-space: normal;
text-align: right;
height: 30px;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
/* Label the data */
#no-more-tables td:before {
content: attr(data-title);
}
.table-bordered {
border: none;
}