css - Vertical scrolling will not scroll to end of list -
i trying achieve vertical scroll. reason won't scroll way end of list.
i working angular
here codepen of code example -> http://codepen.io/gy22/pen/pqeozv
html code:
<!-- start sidebar --> <div id="sidebar" ng-app="dragdrop" ng-controller="appctrl"> <ul> <li ng-repeat="user in users" class="circular"> <p class="initials">{{user.initials}}</p> </li> </ul> </div> <!-- end sidebar -->
css code:
#sidebar { position: fixed; width: 120px; height: 900px; background-color: #03a9f4; z-index: 33; margin-top: 0px; overflow-y: scroll; overflow-x: hidden; margin-bottom: 100px } #userlist { padding-bottom: 10px !important; } ul li { margin-left: -22px; list-style-type: none; } .circle { border-radius: 50%; width: 25px; height: 25px; background-color: hotpink; } .initials { margin-left: 25px; padding-top: 30px; font-weight: bold; font-size: 18px; }
angular code:
var contenteditor = angular.module("dragdrop", []); contenteditor.controller('appctrl', function($scope) { $scope.users = [{ initials: 'gy' }, { initials: 'xx' }, { initials: 'kk' }, { initials: 'tt' }, { initials: 'aa' }, { initials: 'qq' }, { initials: 'pp' }, { initials: 'ss' }, { initials: 'mm' }, { initials: 'rs' }, { initials: 'kl' }, { initials: 'cj' }, { initials: 'rt' }, { initials: 'dj' }, { initials: 'xg' }, { initials: 'xx' }]; });
change height of #sidebar
100%
instead of fixed height.
Comments
Post a Comment