So entfernen Sie die Bildlaufleiste für das Seitenmenü

Ich habe einige Probleme auf der Benutzeroberfläche. Scrollbar für das linke Menü bekommen, das wir nicht wollen. Gibt es eine Möglichkeit, das Problem zu beheben? Bitte beachten Sie den beigefügten Screenshot (rot hervorgehoben). Bitte beachten Sie auch den Code für das linke Menü.So entfernen Sie die Bildlaufleiste für das Seitenmenü

<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

Quelle

2017-04-18 user3125637

Fügen Sie das CSS zu Ihrem Snippet hinzu und korrigieren Sie die Bilder, indem Sie beispielsweise Ihre Originalbilder verwenden oder [Placehold.it] (http://placehold.it/) verwenden. Sie können 'overflow-x: hidden;' verwenden, um dies sofort zu entfernen, oder Sie können die Parameter der Kinder (wie 'width',' padding', 'margin') überprüfen und sehen, was den Überlauf verursacht. –

versuche, 'overflow-x: hidden;' zu deiner Seitenleiste hinzuzufügen und die 'width' anzupassen – Felix

Sie können 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>

Quelle

2017-04-18 11:02:31 Prasadau

Wenn es aswell die Scroll deaktivieren sollte nur tun:

overflow-x: hidden;

auf Ihrer Seite Navigation

Quelle

2017-04-18 11:03:24 RacoonOnMoon

Sie die Einstellung der Breite zu 16,67% im ersten Linie, das ist zu klein für den Inhalt. Sie können den Inhalt mit overflow: hidden ausblenden, aber es scheint, dass das zugrunde liegende Problem ist, dass die Größe für die Sidebar zu klein ist.

Quelle

2017-04-18 11:04:21 Toby

Fügen Sie im Inline-Stil Ihrer Navbar nur zwei weitere Attribute hinzu.

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

Und wenn Sie nicht Ihre Sidebar wollen, wenn Browser schrumpfen Fenster minimiert wird, dann können Sie position:fixed; entfernen. Ich hoffe es hilft.

Quelle

2017-04-18 11:04:29 Chirag

So entfernen Sie die Bildlaufleiste für das Seitenmenü

Antwort

Verwandte Themen