Angular flex layout challenge

1
votes

I have an angular app (v6.1) which uses angular flex & Angular flex-layout. I am using angular v6.1 to make use of the fragment scroll feature. My page has a toolbar, side navigation with links to fragments within page and a center content(see the picture below). My requirement is to have the toolbar and left nav fixed while the center content alone should scroll. Following is my app.component.html. with this html, the whole of the page scrolls and not just the center content. How can I achieve the desired behaviour?

app.component.html

<div  fxLayout="column">
  <div fxFlex="20%" fxFlexFill style="background-color: rgb(48, 138, 133); ">
      <mat-toolbar color="primary">
        <mat-toolbar-row fxLayoutGap="10px">
          <a type="button" href="#one">Menu item #1</a>
          <a type="button" href="#two">Menu item #2</a>
        </mat-toolbar-row>
      </mat-toolbar>
  </div>
  <div fxFlex="80%">
    <div fxLayout="row" style="background-color: cadetblue">
      <div fxFlex="20%" fxLayout="column" style="background-color: chocolate">
        <a mat-button routerLink="./" routerLinkActive="active" fragment="one">Nav Link #1</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="two">Nav Link #2</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="three">Nav Link #3</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="four">Nav Link #4</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="five">Nav Link #5</a>
      </div>
      <div fxLayout="column" fxLayoutGap="100px" fxFlex="100%"
        style="background-color: chartreuse;">
        <p id="one">para 1</p>
        <p id="two">para 2</p>
        <p id="three">para 3</p>
        <p id="four">para 4</p>
        <p id="five">para 5</p>
        <p id="six">para 6</p>
        <p id="seven">para 7</p>
        <p id="eight">para content 8</p>
      </div>
    </div>
  </div>
</div>

enter image description here

2
htmlcssangularangular-materialangular-flex-layout

2 Answers

1
votes

Okay. There's a few things that you need to do to make this work.

First, you need to make sure your body has a height of 100%. Otherwise, whenever an element is given a height of 100%, it won't know "100% of what" and will just grow as much as it wants.

The next thing you want is adding this style in a few places: height: 100%; overflow: auto. This says "the element fills it's parent, and if the content grows any bigger, make the content scrollable". Specifically, add these styles to the two inner columns.

stackblitz with result

0
votes

One of the Best way to do what you require is By creating the sidenav and toolbar as a separate component and rendering child components in the body (the green area ) Just like 

<header role="mast-head">
   <div class="container-fluid">
      //Your header will come here 
   </div>
</header>
<div class="side bar">
   <ul>
      <li routerLinkActive="active" [routerLink]="['/homepage/h']"><a href="javascript:"><img src="" alt="" />Dashboard</a></li>
      <li routerLinkActive="active" [routerLink]="['/homepage/dst']"><a href="javascript:"><img src="" alt="" />A</a></li>
      <li routerLinkActive="active" [routerLink]="['/homepage/j']"><a href="javascript:"><img src="" alt="" />B </a></li>
   </ul>
</div>
<div class="body">
   <router-outlet >     
   </router-outlet>
</div>