Overflow content causes border removal (CSS and AngularJS)

Question

I'm seeing some rather strange behavior with overflow content in my application. If you take a look at the codepen and scroll horizontally you'll see that once you start scrolling the border on the .track divs or possibly the .cell divs is removed. Any help much 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 */

I have encountered this issue. It is because of the initial width being limited. I know a hack, just trying it out on your codepen. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Apr 7, 2016 at 9:13

fbid · Accepted Answer · 2016-04-07 09:19:55Z

1

You have to use an outline CSS rule instead of border.

Editing your CSS like this would fix the issue:

.cell {
  min-width: 80px;
  height: 50px;
  background: $sublime-black;
  //border-right: 2px solid $codepen-grey;  <-- replace with outline
  outline:2px solid $codepen-grey;
}

Working codepen

answered Apr 7, 2016 at 9:19

fbid

1,5702 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Praveen Kumar Purushothaman Over a year ago

That's wow, but looks like a hack. If you inspect and find the width of the row div with class="track ng-scope", it still doesn't use the full width. Can you find why? This just works as a presentational way. :)

Collectives™ on Stack Overflow

Overflow content causes border removal (CSS and AngularJS)

HTML

CSS

Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

CSS

Angular

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related