サイドメニューのスクロールバーを削除するには

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; 'を追加して、' width'を調整してみてください – 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

ナビゲーションバーのインラインスタイルで、さらに2つの属性を追加します。

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

そして、あなたはあなたのサイドバーが縮小したくない場合は、ブラウザのウィンドウは、その後、最小化されたとき、あなたはposition:fixed;を削除することができます。それが役に立てば幸い。

出典

2017-04-18 11:04:29 Chirag

サイドメニューのスクロールバーを削除するには

答えて

関連する問題