jScrollPane cutting off bottom of scrollbar

Question

you can see the code here.

jQuery:

$(document).ready(function(){
    $('#scroll').jScrollPane({showArrows: true});
});

CSS:

#scroll {
    width: 50%;
    height: 200px;
}
.jspTrack {
    background-color: lightgreen;
    border: 1px solid green;
}
.jspArrowUp, .jspArrowDown {
    background-color: #009933;
    border: 1px solid lightgreen;
}
.jspArrowUp.jspDisabled, .jspArrowDown.jspDisabled {
    background-color: lightgreen;
    border: 1px solid green;
}
.jspDrag {
    background-color: #009933;
    border: 1px solid lightgreen;
}

Whenever it loads, a quarter of the bottom arrow gets cut off.

Please Help??

Answer 1

I edited your jsFiddle: http://jsfiddle.net/n8Xgz/24/

$('.jspTrack').css('height', '166');
$('.jspArrow').css({
    'position':'relative',
    'zIndex':'999',
    'height':'14px'
});