Scrollable bootstrap sidebar when collapsed

I'm using bootstrap 3, and have the following sidebar:

        <div class="sidebar-profile" style="padding-bottom: 0px;">
           <a href="Default.aspx" style="word-wrap: break-word;">
              <i class="fa fa-fw fa-arrow-left"></i><b>Home</b>
           </a>
           <hr>
        </div>

        <nav>
            <ul class="nav nav-pills nav-stacked">

                <li class="active"><a href="#" onclick="SelectSection('');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa fa-align-justify"></i>All Sections</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>
            </ul>
        </nav>

The sidebar is not scrollable, when I collapse the sidebar, I can see the menu item pop-up on mouse hover:

Side menu: not-collapsed, without scrollbars:

Side menu: collapsed, and the mouse is over one menu item:

My problem is, when adding scrollbars to the menu, the item will pop-up inside the parent menu, and not out side the menu.

The code after adding the scrollbars:

        <div class="sidebar-profile" style="padding-bottom: 0px;">
           <a href="Default.aspx" style="word-wrap: break-word;">
              <i class="fa fa-fw fa-arrow-left"></i><b>Home</b>
           </a>
           <hr>
        </div>

        <nav>
            <ul class="nav nav-pills nav-stacked" style="height: auto;max-height: 500px;overflow-x: hidden;">

                <li class="active"><a href="#" onclick="SelectSection('');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa fa-align-justify"></i>All Sections</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>

            </ul>
        </nav>

please view the following images addressing the issue:

Side menu: collapsed with scrollbars:

Side menu: collapsed, with mouse hover over one menu item, but the item is not pop-up outside the menu borders:

check below code snippet for possible solution.

using

.navBar {
  height: auto;
  max-height: 500px;
  overflow-x: hidden;
}

$(document).ready(function() {

 $("#menu-toggle").click(function(e) {
  e.preventDefault();
  var elem = document.getElementById("sidebar-wrapper");
  left = window.getComputedStyle(elem,null).getPropertyValue("left");
  if(left == "200px"){
   document.getElementsByClassName("sidebar-toggle")[0].style.left="-200px";
  }
  else if(left == "-200px"){
   document.getElementsByClassName("sidebar-toggle")[0].style.left="200px";
  }
 });
});

#sidebar-wrapper {
  top: 52px;
  left: -200px;
  width: 200px;
  background-color: #ddd;
  color: white;
  position: fixed;
  height: 100%;
  z-index: 1;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  width: 250px;
  list-style: none;
}
.sidebar-nav li {
  text-indent: 20px;
  line-height: 50px;
}

.navBar {
  height: auto;
  max-height: 500px;
  overflow-x: hidden;
}
 .navBar li a {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow:hidden;
  background: #cecece;
}
.navbar-toggle:hover {
  text-decoration: none;
}

#sidebar-wrapper.sidebar-toggle {
  transition: all 0.3s ease-out;
  margin-left: -200px;
}
@media (min-width: 768px) {
  #sidebar-wrapper.sidebar-toggle {
    transition: 0s;
    left: 200px;
  }
}

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



</head>
<body>
<nav class="navbar navbar-default" role="navigation">
 <div class="container">
  <div class="navbar-header pull-left">
   <a id="menu-toggle" href="#" class="navbar-toggle">        
           <i class="fa fa-angle-left" aria-hidden="true"></i> HOME
   </a> 
  </div>
  <div id="sidebar-wrapper" class="sidebar-toggle">

   <ul class="nav nav-pills nav-stacked navBar">
    <li class="active"><a href="#" onclick="SelectSection('');"><i class="fa fa-fw fa fa-align-justify"></i>All Sections</a></li>
    <li><a href="#" onclick="SelectSection('PersonalDetails');"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li>
    <li><a href="#" onclick="SelectSection('PersonalDetails');"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li>
    <li><a href="#" onclick="SelectSection('IdentificationDocument');"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li>
    <li><a href="#" onclick="SelectSection('IdentificationDocument');"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li>
    <li><a href="#" onclick="SelectSection('SegmentClass');"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li>
    <li><a href="#" onclick="SelectSection('SegmentClass');"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li>
    <li><a href="#" onclick="SelectSection('EmploymentDetails');"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li>
    <li><a href="#" onclick="SelectSection('EmploymentDetails');"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li>
    <li><a href="#" onclick="SelectSection('ContactDetails');"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li>
    <li><a href="#" onclick="SelectSection('ContactDetails');"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li>
    <li><a href="#" onclick="SelectSection('ExpectedTurnover');"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li>
    <li><a href="#" onclick="SelectSection('ExpectedTurnover');"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li>
    <li><a href="#" onclick="SelectSection('CRS');"><i class="fa fa-fw fa-file-text"></i>CRS</a></li>
    <li><a href="#" onclick="SelectSection('CRS');"><i class="fa fa-fw fa-file-text"></i>CRS</a></li>
    <li><a href="#" onclick="SelectSection('ResidenceAddress');"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li>
    <li><a href="#" onclick="SelectSection('ResidenceAddress');"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li>
    <li><a href="#" onclick="SelectSection('MailingAddress');"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li>
    <li><a href="#" onclick="SelectSection('MailingAddress');"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li>
    <li><a href="#" onclick="SelectSection('WorkAddress');"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li>
    <li><a href="#" onclick="SelectSection('WorkAddress');"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li>
    <li><a href="#" onclick="SelectSection('HomeCountryAddress');"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li>
    <li><a href="#" onclick="SelectSection('HomeCountryAddress');"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li>
    <li><a href="#" onclick="SelectSection('Fatca');"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li>
    <li><a href="#" onclick="SelectSection('Fatca');"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li>
    <li><a href="#" onclick="SelectSection('Services');"><i class="fa fa-fw fa-file-text"></i>Services</a></li>
    <li><a href="#" onclick="SelectSection('Services');"><i class="fa fa-fw fa-file-text"></i>Services</a></li>
    <li><a href="#" onclick="SelectSection('CIFProfile');"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>
    <li><a href="#" onclick="SelectSection('CIFProfile');"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>
   </ul>

  </div>
 </div>
</nav>
</body>
</html>

Scrollable bootstrap sidebar when collapsed

1 Answers