Scrollable bootstrap sidebar when collapsed
2
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:
html twitter-bootstrap-3
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
add a comment |
2
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:
html twitter-bootstrap-3
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
add a comment |
2
2
2
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:
html twitter-bootstrap-3
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
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:
html twitter-bootstrap-3
html twitter-bootstrap-3
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
edited Nov 26 '18 at 6:25
Nitin Bisht
1,1241418
1,1241418
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
asked Nov 13 '18 at 10:44
Imad Abu HayyahImad Abu Hayyah
947
947
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
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>answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279241%2fscrollable-bootstrap-sidebar-when-collapsed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
add a comment |
0
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>answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
add a comment |
0
0
0
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>answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
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>$(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>$(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>answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
edited Nov 26 '18 at 7:36
answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
answered Nov 26 '18 at 7:27
Shiv Kumar BaghelShiv Kumar Baghel
1,3373620
1,3373620
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279241%2fscrollable-bootstrap-sidebar-when-collapsed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
