Nanoscroller.js doesn't get triggered by itself when used in bootstrap modal

See more:

Javascript

CSS

HTML

MVC4

bootstrap

I want to use nanoscroller in a bootstrap modal. I have an inner div which wraps up the body of my modal and an outer div which encloses the inner div.

<div class="nano modal-body ">
        <div class=" content">
            <p>.....My content here...</p>
        </div>
</div>

As you can can see below, I've set the height of the outer div to 100px. But somehow it doesn't work.

.nano {
    height: 100px!important;
}
.nano .pane {
    background: #888;
}
.nano .slider {
    background: #111;
}

And heres how i've called it.

$(".nano").nanoScroller();

i.e.,
i want this:


http://s12.postimg.org/upg1i8qct/image.png


in place of

http://s16.postimg.org/58wbl6c05/image.png


Heres the nanoscroller documentation
Check it out on jsfiddle