CODEWITHSUNDEEP
htmlcssangularsassangular-components
suvenk
suvenk

Reputation: 517

Sidebar when moved from app component to a separate component in Angular doesn't have full height of the page when the page scrolls down

I am using sidebar as a separate component in my angular application. Before moving it to a separate component, the content was part of the html page of the app component and when page scrolls down, the sidebar used to take full height of the page and I had no issues. Once I moved the content to a separate component and using that component inside app component, the sidebar doesn't take full height of the page when the content scrolls down as shown in the screenshot below

enter image description here

The code in sidebar html file sidebar.html is 

<nav *ngIf="isLoggedIn$ | async" id="sidebar" [ngClass]="{active: (isShown$ | async)}">
<div class="sidebar-header">
    <h2>Test Portal</h2>
</div>

<ul class="items">
    <li [routerLink]="['/car-list']" routerLinkActive="active" title="Cars">
        <a>
            <fa-icon [icon]="faLayerGroup"></fa-icon><span id="spnCars">Cars</span> 
        </a>
    </li>
    <li [routerLink]="['/bike-list']" routerLinkActive="active" title="Bikes">
        <a>
            <fa-icon [icon]="faUsers"></fa-icon><span id="spnBikes">Bikes</span>
        </a>
    </li>
</ul>
</nav>

The code in CSS file sidebar.scss is

#sidebar {
  font-family: 'Poppins', sans-serif;
  min-width: 200px;
  max-width: 200px;
  min-height: 100vh;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
}

#sidebar .sidebar-header {
  padding: 15px 30px 10px 20px;
}

#sidebar ul.items {
  padding: 20px 0;
  border: none;
}

#sidebar ul li {
  outline: none;
  a {
    padding: 10px 20px;
    font-size: 1.1em;
    display: block;
    cursor: pointer;
  }
} 

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
  color: #fff;
  background: #5569c3;
}

#sidebar.active {
  margin-left: -200px;
}

a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

@media (max-width: 768px) {
  #sidebar {
     margin-left: -200px;
  }
  #sidebar.active {
     margin-left: 0;
  }
}

#spnCars {
  padding-left: 14px;
}

#spnBikes {
  padding-left: 10px;
}

The code in app.component.html file is shown below. "app-sidebar" in the below code is where I am placing the sidebar content.

<div class="wrapper">
<app-sidebar></app-sidebar>

<!-- Page Content -->
<div id="page-content">

    <div id="content">
        <router-outlet></router-outlet>
    </div>
</div>

The CSS file app.component.scss is 

.wrapper {
   display: flex;
   width: 100%;
   align-items: stretch;
}

#page-content {
   width: 100%;
   padding: 0px;
   min-height: 100vh;
   transition: all 0.3s;
}

I don't understand why this is happening. Please help me out with this.

Upvotes: 0

Views: 876

Answers (1)

chrnx
chrnx

Reputation: 533

Since you only set the min-height of the #sidebar to 100vh, the height of the sidebar will be exactly 100% of the current view's height and is not going to go further than that. (the current view being the height of your browser)

To fix this you just need to set the height of the #sidebar to 100% to make the sidebar have the same height as its parent (in your case the <div class="wrapper">...

Hope this helps

Upvotes: 1

Related Questions