Nano Scroller is not working in bootstrap DropDown and Model Box

Question

I am trying to create a messaging and notification system similar to facebook with nano-slider (nanoScroller.js) in the drop down. However, the content is scrolling but the slider is not visible.

This is my html code:

<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-envelope-o"></i>
    <span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
    <li class="header">You have 4 messages</li>
    <li>
        <div class="nano-message nano">
            <ul class="menu nano-content" >
                <li><!-- start message -->
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Support Team
                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
                        </h4>
                        <p>Well done ...</p>
                    </a>
                </li>
                <!-- end message -->
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Prakash Bhandari
                            <small><i class="fa fa-clock-o"></i> 2 hours</small>
                        </h4>
                        <p>I am happy with .....</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Developers
                            <small><i class="fa fa-clock-o"></i> Today</small>
                        </h4>
                        <p>We are happy with our task...</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Sales Department
                            <small><i class="fa fa-clock-o"></i> Yesterday</small>
                        </h4>
                        <p>Our salses ...</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pull-left">
                            <img src="http://hr.youngminds.com.np/assets/img/avatar5.png" class="img-circle"
                                 alt="User Image">
                        </div>
                        <h4>
                            Management
                            <small><i class="fa fa-clock-o"></i> 2 days</small>
                        </h4>
                        <p>We are management ...</p>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <li class="footer">
        <a href="#">See All Messages</a>
    </li>
</ul>

This is my javascript code: $(".nano-message").nanoScroller();

Is there any error or other way to solve this problem?

Answer 1

I am sure that there is no error in the HTML and JS code. I also face same problem long time ago but I have solved by doing following.

$(".messages-menu").click(function(){
    setTimeout(function () {
        $(".nano-message").nanoScroller();
    }, 100)
});