Scroll Bar Issue in Left Navigation Menu Bootstrap.

Main Layout :
***************



settings.Panes.Add(subpane =>
{
subpane.Name = "ContentLeft";
subpane.PaneStyle.CssClass = "leftPane";
subpane.ShowCollapseBackwardButton = DefaultBoolean.True;
subpane.ShowCollapseForwardButton = DefaultBoolean.True;
subpane.Size = System.Web.UI.WebControls.Unit.Pixel(250);
subpane.PaneStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(1);
subpane.ScrollBars = System.Web.UI.WebControls.ScrollBars.Auto;

subpane.MinSize = 0;
subpane.MaxSize = 250;


subpane.SetContent(() =>
{
Html.RenderPartial("ContentLeftPartialView");
});


Partial view of Left pane
*****************************

@{
Layout = null;
}
<div data-role="scrollbox" data-scroll="vertical">


<ul class="nav nav-list">
<li class="divider"></li>
<li>

<form class="filterform" action="#">

<input class="filterinput" type="text" placeholder ="Search..." style="font-size:19px" >

</form>



@if (ViewBag.dtSection != null)
{
foreach (var Section in ViewBag.dtSection)
{


<ul class="nav nav-pills nav-stacked">
<li class="active " >
<a href="#" style="background-color: #01519C; " data-toggle="collapse" data-target="#@Section.ToString().Replace(" ", "")">
<span class="badge pull-right"></span>
@Section
</a>
</li>
<div id="@Section.ToString().Replace(" ", "")" class="collapse in" aria-expanded="true">
<ul class="nav nav-list tree" id ="list">
@if (ViewBag.dtReport != null)
{
foreach (var Report in ViewBag.dtReport)
{
if (@Section == @Report.sSubGroup)
{
@*<li><a href="@Report.ItemArray[2]">@Report.ItemArray[1]</a></li>*@
<li><a href="@Url.Action(Report.sAction, Report.sController, new { id = Report.sId })">@Report.sModule <span class="badge pull-right"></span> </a></li>
}
}
}
</ul>


</div>
</ul>
}
}

</li>
</ul>


</div>
<script type="text/javascript">
(function($) {


$('.filterinput').keyup(function() {
var a = $(this).val();
if (a.length > 1) {
// this finds all links in the list that contain the input,
// and hide the ones not containing the input while showing the ones that do
var containing = $('#list li').filter(function () {
var regex = new RegExp('\\b' + a, 'i');
return regex.test($('a', this).text());
}).slideDown();
$('#list li').not(containing).slideUp();
} else {
$('#list li').slideDown();
}
return false;
})


}(jQuery));


// custom css expression for a case-insensitive contains()
jQuery.expr[':'].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};


</script>

It works in IE.
But in chrome and Firefox no solution.