Tinyscrollbar Hiding Content inside SimpleModal

Question

I have a problem whenever I launch a new modal (SimpleModal) and use (Tinyscrollbar) to scroll through the content in that the scrollbar seems to hide the first bullet (red error message) of my content. Please see the Fiddle below, click to open the modal and then grab the scrollbar, move it down then move it back up to see the hidden bullet.

The only reason I guess it might be doing this is due to the height changing whenever the modal pops up which is why I read the height of the modal container and used it to define "viewport" and then I ran a tinyscrollbar_update() to no avail.

My JS:

$(document).ready(function(e) {
// Remove Order (from cart) Modal
$('.btn_remove_order').click(function() {
    $(".modalMultiAlert").modal({
        opacity: 60,
        overlayCss: { height: "200px" },
        minHeight: 200,
        maxHeight: 800,
        onShow: function() {
            var heightscroll = $('.simplemodal-container').height();
            $('.viewport').css('height', heightscroll);              
            var scrollbar = $('#scrollbar_container');
            scrollbar.tinyscrollbar();
            scrollbar.tinyscrollbar_update();
        },
        close: false
    });
});

});

The HTML and CSS can be seen in the Fiddle:

http://jsfiddle.net/cd80cpan/6/

Thank you for your help!

Answer 1

Found a solution! I simply made a copy (.clone) of the Tinyscrollbar container and then did a .replaceWith on the same container then bind Tinyscrollbar from there, see code;

    var $scrollbar = $('#scrollbar_container');
    // Let's make a copy of the Scrollbar Container
    var $modalCopy = $scrollbar.clone();
    // Remove Order (from cart) Modal
    $('.btn_remove_order').click(function() {
        $(".modalMultiAlert").modal({
            opacity: 60,
            minHeight: 200,
            maxHeight: 800,
            onShow: function() {
                // Replace the Scrollbar container after the Modal has loaded with Copy
                $scrollbar.replaceWith($modalCopy);
                // Determine height of the Modal
                var $heightscroll = $('.simplemodal-container').height();
                // Change the viewport height based on Modal height
                $('.viewport').css('height', $heightscroll);       
                // Initialize Tinyscrollbar       
                $modalCopy.tinyscrollbar();
            },
            close: false
        });
    });