user3125637
Reputation: 51
How to remove scrollbar for Side menu
I am facing some problems on UI. Getting Scrollbar for the left menu that we do not want. Is there any way to resolve the issue. Please review the attached screenshot (highlighed in red). Also please refer the code for left menu.
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}" style="width:16.67%">
<div id="sidebar-wrapper">
<ul class="sidebar-nav list-group" style="margin-left:0; width:100%; right:0px;">
<li>
<div style="height: auto; border-bottom: 1px; border-bottom-style: solid; border-radius: 0; border-bottom-color: #77c157;">
<h4 class="headingTables" style="color:#ffffff!important; vertical-align:middle; padding:20px; text-align:left;text-justify:inter-word;">Hello {{firstName}} {{lastName}}!</h4>
</div>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"dashboard")'>
<a [routerLink]="['/dashboard']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/DashboardIcon.png">
Dashboard
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"properties")'>
<a [routerLink]="['/projects']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ProjectsIcon.png">
Properties
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"historicPayments")'>
<a [routerLink]="['/historicPayments']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/PaymentsIcon.png">
Payment History
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"futurePayments")'>
<!--*ngIf='permissions && permissions.length && checkPermission(permissions,"futurePayments")'>-->
<a [routerLink]="['/futurePayments']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/PaymentsIcon.png">
Next Payment Date
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"profile")'>
<a [routerLink]="['/profile']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ProfileIcon.png">
Profile
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"requests")'>
<a [routerLink]="['/serviceRequestsList']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ServiceRequestsIcon.png">
Service Requests
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"faqs")'>
<a [routerLink]="['/faqs']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/FAQsIcon.png">
FAQ's
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"admin")'>
<a [routerLink]="['/searchproperties']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/admin.png">
Admin Home
</span>
</div>
</a>
</li>
<li style="height: 60px; position: relative;padding: .75rem 1.25rem;">
</li>
</ul>
</div>
</nav>
Upvotes: 0
Views: 1969
Answers (4)
RacoonOnMoon
Reputation: 1586
If it should disable the scroll aswell just do:
overflow-x: hidden;
on your side navigation
Upvotes: 0
Chirag
Reputation: 1022
Add just two more attributes in your navbar's inline style.
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}" style="width:16.67%;position: fixed; overflow:hidden;">
And if you don't want your sidebar to shrink when browser window is minimized then you can remove position:fixed;. Hope it helps.
Upvotes: 0
Toby
Reputation: 13385
You're setting the width to 16.67% in the first line, that is too small for the content. You can hide the content with overflow: hidden but it seems like the underlying problem is that the size set for the sidebar is too small.
Upvotes: 2
Prasadau
Reputation: 61
You can use css overflow-x: hidden;
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}" style="width:16.67%;overflow-x: hidden;">
<div id="sidebar-wrapper">
<ul class="sidebar-nav list-group" style="margin-left:0; width:100%; right:0px;">
<li>
<div style="height: auto; border-bottom: 1px; border-bottom-style: solid; border-radius: 0; border-bottom-color: #77c157;">
<h4 class="headingTables" style="color:#ffffff!important; vertical-align:middle; padding:20px; text-align:left;text-justify:inter-word;">Hello {{firstName}} {{lastName}}!</h4>
</div>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"dashboard")'>
<a [routerLink]="['/dashboard']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/DashboardIcon.png">
Dashboard
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"properties")'>
<a [routerLink]="['/projects']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ProjectsIcon.png">
Properties
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"historicPayments")'>
<a [routerLink]="['/historicPayments']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0; color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/PaymentsIcon.png">
Payment History
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"futurePayments")'>
<!--*ngIf='permissions && permissions.length && checkPermission(permissions,"futurePayments")'>-->
<a [routerLink]="['/futurePayments']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/PaymentsIcon.png">
Next Payment Date
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"profile")'>
<a [routerLink]="['/profile']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ProfileIcon.png">
Profile
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"requests")'>
<a [routerLink]="['/serviceRequestsList']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/ServiceRequestsIcon.png">
Service Requests
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"faqs")'>
<a [routerLink]="['/faqs']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/FAQsIcon.png">
FAQ's
</span>
</div>
</a>
</li>
<li *ngIf='permissions && permissions.length && checkPermission(permissions,"admin")'>
<a [routerLink]="['/searchproperties']" [routerLinkActive]="['router-link-active']" class="list-group-item headingTables" style="height:inherit;margin:0;padding:0;color: #ffffff !important;">
<div style="padding:3px;">
<span style="padding:10px 3px 10px 0px; display:inline-block;">
<img style="height: 25px;width: 25px;" src="assets/img/admin.png">
Admin Home
</span>
</div>
</a>
</li>
<li style="height: 60px; position: relative;padding: .75rem 1.25rem;">
</li>
</ul>
</div>
</nav>
Upvotes: 0
Related Questions
- How to remove this horizontal scrollbar in Bootstrap
- How do I remove horizontal scroll bar from my website
- Bootstrap sidebar menu overlapped during content scroll
- Remove Horizontal Scroll Bar
- Disable Scrolling on Sidebar Using Bootstrap
- Sidebar menu with scrollbars hiding dropdowns
- Delete horizontal scrollbar
- how to remove the bottom scroll?
- Remove scrollbars from sidebar
- How to remove a horizontal scrollbar appearing while using twitter bootstrap on mobile menu