In my ng-repeat, elements are highlighted on hover of the main div and a lightbox appears upon clicking an element. However, there is empty space below each element where cursor changes to pointer and lightbox opens. This phantom area is causing a false scroll bar to appear. See image here:
https://i.sstatic.net/4cbLY.png
I marked the issue in paint since cursor doesn't show in screenshots. An unintended selection box appears when clicked on the empty space as shown below:
https://i.sstatic.net/S5LSI.png
This faulty behavior occurs only in the template for this tab:
<div class="container-fluid col-md-12 learning-container" id="badge-popup-container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-4" id="track-progress-div">
<h3 class="tile-header">Track - {{currentTrack}}</h3>
<br>
<span id="progress-text">Progress</span>
<span id="progress-number-text"> {{trackProgress}}% </span>
<md-progress-linear md-mode="determinate" value="{{trackProgress}}" id="track-progress-bar"></md-progress-linear>
</div>
<div class="col-md-7"></div>
</div>
<br>
<div class="row">
<div class="col-md-1"></div>
<div id="badges-div" class="col-md-10">
<h3 class="tile-header" id="badge-display-title">Your Badges</h3>
<div class="badges-table">
<div ng-repeat="badge in earnedBadges" class="table-badge-div" ng-click="showBadge($event, badge)">
<img ng-src="images/{{badge.image}}" class="badge-card-image">
<div class="badge-card-bottom">
<p class="badge-card-title">{{badge.name}}</p>
</div>
<p class="badge-card-points"><b>{{badge.points}}</b></p>
<p class="badge-card-date"><b>{{badge.earnedDate}}</b></p>
<img src="images/all_white.png" class="badge-highlight-image">
</div>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
The problem resides in the second row, specifically with the 'all_white' image used for highlighting cards on hover.
Browser used: Google Chrome.
Any insights on why this erroneous selection box appears? How can I remove it?
Edit:
Here's the CSS as requested.
Edit 2:
Initially, the wrong CSS was shared. Here's the correct one. Upon inspecting the empty space, browser points to the table-badge-div, indicating it occupies that space.
(Insert corrected CSS code here)