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

  • 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>
    
    

    Sunday, March 17, 2019 9:02 PM

Answers

  • User283571144 posted

    Hi comicrage,

    As far as I know, we could add another div with special style to make the mat-toolbar lock position.

    More details, you could refer to below codes:

    <div   style="margin-bottom:5px;
    top: 0;
     ;
     z-index: 1;
     background-color: inherit;">
      <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 fxLayout="row" fxFlex="10%" fxFlex.gt-sm="10%" >
                <div fxLayout="column" fxFlex  >
                    <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span>Total</span></mat-toolbar>
                </div>
        </div>
      </div>
    </div>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 18, 2019 8:23 AM