사이드 바 메뉴의 스크롤 바를 제거하는 방법

UI에 문제가 있습니다. 우리가 원하지 않는 왼쪽 메뉴에 대한 스크롤 막대 얻기. 문제를 해결할 방법이 있습니까? 첨부 된 스크린 샷 (빨간색으로 강조)을 검토하십시오. 또한 왼쪽 메뉴의 코드를 참조하십시오.사이드 바 메뉴의 스크롤 바를 제거하는 방법

<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>

. Screenshot

출처

2017-04-18 user3125637

스 니펫에 CSS를 추가하고 원본 이미지를 사용하거나 [Placehold.it] (http://placehold.it/)을 사용하여 이미지를 수정하십시오. 'overflow-x : hidden;'을 사용하면 즉시 이것을 없애거나,'width','padding','margin'과 같은 자식 변수를 검사하여 오버 플로우의 원인을 확인할 수 있습니다. –

사이드 바에'overflow-x : hidden; '을 추가하고'너비' – Felix

css overflow-x : hidden을 사용할 수 있습니다. 이 aswell 스크롤을 비활성화해야하는 경우

<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>

출처

2017-04-18 11:02:31 Prasadau

만 수행

overflow-x: hidden;

당신의 측면 탐색 당신은 먼저 16.67 %로 폭을 설정하는

출처

2017-04-18 11:03:24 RacoonOnMoon

을에 그 내용은 너무 작습니다. overflow: hidden으로 콘텐츠를 숨길 수 있지만 기본 문제는 사이드 바에 설정된 크기가 너무 작아 보인다는 것입니다.

출처

2017-04-18 11:04:21 Toby

네 navbar의 인라인 스타일에 속성을 두 개만 더 추가하십시오.

<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}" style="width:16.67%;position: fixed; overflow:hidden;">

그리고 당신이 당신의 사이드 바는 축소하지 않으려는 경우 브라우저 창은 다음 최소화 될 때 당신은 position:fixed;을 제거 할 수 있습니다. 희망이 도움이됩니다.

출처

2017-04-18 11:04:29 Chirag

사이드 바 메뉴의 스크롤 바를 제거하는 방법

답변

관련 문제