There seems to be a peculiar issue with overflow content in my application. When you scroll horizontally on the codepen, you'll notice that the border on the .track or perhaps the .cell divs disappears. Any assistance would be greatly appreciated.
HTML
<section ng-app="netJamApp">
<section ng-controller="ProjectController" id="project">
<div class="tracks">
<div ng-repeat="i in getNumber(pref.NUM_TRACKS) track by $index" class="track">
<div ng-repeat="i in getNumber(cellsPerTrack(240)) track by $index" class="cell"></div>
</div>
</div>
</section>
</section>
CSS
#project {
padding: 20px;
}
#project .tracks {
overflow-x: auto;
display: flex;
flex-direction: column;
}
#project .tracks .track {
font-size: 30px;
list-style-type: none;
display: flex;
}
#project .tracks .track:first-child {
border: 1px solid #343436;
}
#project .tracks .track:not(first-child) {
border: 1px solid #343436;
border-top: none;
}
#project .tracks .cell {
min-width: 80px;
height: 50px;
background: #272822;
border-right: 2px solid #343436;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slide-in-left {
animation-name: slideInLeft;
animation-duration: 250ms;
visibility: visible !important;
}
Angular
var app = angular.module('netJamApp', []);
/* PROJECT CONTROLER */
app.controller('ProjectController', ['$scope', function($scope) {
// INIT SCOPE VARS
$scope.pref = {};
$scope.pref.NUM_TRACKS = 5;
$scope.pref.MIN_CELLS_PER_TRACK = 20;
$scope.pref.CELL_LENGTH = 15;
$scope.pref.PADDING_CELLS = 10;
// HELPERS
//used for ng-repeat to repeat a given number of times
$scope.getNumber = function(num) {
return new Array(num);
};
// determine the number of cells to insert inside of a track
$scope.cellsPerTrack = function(audioclip_len) {
var cells = audioclip_len / $scope.pref.CELL_LENGTH + $scope.pref.PADDING_CELLS;
return Math.ceil(Math.max(cells, $scope.pref.MIN_CELLS_PER_TRACK));
};
}]);
/* project controller */