如何刪除滾動條的側邊菜單

我在用戶界面上遇到了一些問題。獲取我們不想要的左側菜單的滾動條。有什麼辦法可以解決這個問題。請查看附件截圖（高亮紅色）。另請參閱左側菜單的代碼。如何刪除滾動條的側邊菜單

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

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

在你身邊導航

來源

2017-04-18 11:03:24 RacoonOnMoon

你在第一個寬度爲16.67％對於內容來說太小了。您可以使用overflow: hidden隱藏內容，但似乎底層問題是爲側邊欄設置的尺寸太小。

來源

2017-04-18 11:04:21 Toby

在導航欄的內聯樣式中只添加兩個屬性。

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

如果你不想讓你的側邊欄萎縮時最小化瀏覽器窗口，然後就可以刪除position:fixed;。希望能幫助到你。

來源

2017-04-18 11:04:29 Chirag

如何刪除滾動條的側邊菜單

回答

相關問題