Angular Mat-ToolBar Locking Position but text disappear and not correctly positioun

Question

User956626884 posted

Hi,

I  am trying to lock the header row, which I used a mat-toolbar. When the scrollbar is used to scroll down vertically, the header row needs to stay in position at the top of the screen and not disappear. After my mat-toolbar, I have a mat-listbar which displays rows of record. 

I googled many postings on fixed and sticky position but when I applied the code  it was not working. 

.my-mat-tool-bar {

<div> <div> height: 30px !important;</div> <div> min-height: 30px !important;</div>
<div> /*; */</div> <div> }</div> <div></div> <div></div> <div>I tried some examples from the following. The sticky attribute does not do anything. When I applied only the fixed position  as you see in my .my-mat-toolar, I see the mat-toolbar header being render but the header text disappeared. It did not positioned itself above the mat-listitem. It position itselft on the first mat-listitem row which is an error. </div> <div></div> <div>Also, the position of the mat-toolbar is not at the top of the screen where if scrolling down, mat-toolbar header is at the top and fixed but it looks like the grid list is scrolling into it. But in my rendered UI, the headers is a few rows down from the top.</div> <div></div> <div>I am not sure how to really get it working.  Any help is appreciated.</div> <div></div> <div>

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}

mat-toolbar {
    height: 64px;
    position: fixed;
    z-index: 100;
    width: 100%  !important;
}


Here is my angular html mat-toolbar code

  <div fxLayout='row'>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                        <div fxLayout="column" fxFlex  >
                            <mat-toolbar fxLayoutAlign="center center" class="my-mat-tool-bar"><span>W/E</span></mat-toolbar>
                        </div>
                    </div>
                    <div fxLayout="row" fxFlex="17%" fxFlex.gt-sm="20%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="center center" class="my-mat-tool-bar"><span></span></mat-toolbar>
                            </div>
                    </div>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span>MON</span></mat-toolbar>
                            </div>
                    </div>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span>TUE</span></mat-toolbar>
                            </div>
                    </div>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span>WED</span></mat-toolbar>
                            </div>
                    </div>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="end" class="wf-mat-tool-bar"><span>THU</span></mat-toolbar>
                            </div>
                    </div>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span>FRI</span></mat-toolbar>
                            </div>
                    </div>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span>SAT</span></mat-toolbar>
                            </div>
                    </div>
                    <div fxLayout="row" fxFlex="9%" fxFlex.gt-sm="9%" >
                            <div fxLayout="column" fxFlex  >
                                <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span>SUN</span></mat-toolbar>
                            </div>
                    </div>
  
                </div>