Angular Material 2 - How to lock mat-toolbar and mat-tabs to the top

Question

For my Website I'm attempting to lock the < Mat-Toolbar > to the top of the screen and then directly under that I want to lock the < Mat-Tabs > .

The issue I'm running into is that position: fixed in CSS is not locking it at all, and when I actually go to the site and inspect element it's putting in a < div >

How am I supposed to lock these two elements to the top, how am I supposed to bypass this auto created Div? I had a previous question similar to this but I solved that using Fixed and Absolute positioning, which that does not apply in this newer version of Angular/ Angular Material.

Source Code for my Website

Solution 1

Did you mean a sticky toolbar?

Just add a class to the toolbar and make it sticky (using the position attribute set to sticky):

.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 */
}

---

Note: There is no support for position: sticky on IE 11. For more info on browser support for position: sticky, view this caniuse page.

Solution 2

You can probably achieve it by setting the style with ::ng-deep:

::ng-deep .mat-toolbar{
  z-index: 998;
  position: fixed
}
::ng-deep .mat-tab-group{
  margin-top:55px !important;
}

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
      background-color: red !important;
}
::ng-deep .mat-tab-body-wrapper{
    position: relative !important;
    margin-top:55px;
}

DEMO

Solution 3

Even i was facing the same issue for my project. It is very diffiucult to make the toolbar fixed when it's declared inside <mat-sidenav-container>.

The reason why it's difficult is because both <mat-sidenav-container> and <mat-toolbar> uses transform: translate3d(0,0,0).

So the best way to proceed would be, to remove <mat-toolbar> from <mat-sidenav-container> and write an extenal css for the toolbar.

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

This solution worked for me.

Solution 4

Here's the solution boys.

1) Go the toolbar component and add this to its css/scss file :

:host {
  // position: sticky;
  // position: -webkit-sticky; /* For macOS/iOS Safari */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

2) Now go your root app that contains both the top bar and the router-outlet (app.component by default), and type the following on its css/scss file :

:host {
    position: absolute;
    top: 64px;  // here you must specify the height of your topbar
    bottom: 0;
    left: 0;
    right: 0;
}

Took my a few hours, but finally found the solution.

Solution 5

This works for me:

app.component.html

    <div class="app-container">
        <mat-sidenav-container>

            <mat-sidenav mode="over">
                <div>item 1</div>
                <div>item 2</div>
                <div>item 3</div>
            </mat-sidenav>

            <mat-toolbar>
                <i class="material-icons hamburger-menu">menu</i>
                <span>item A</span>
                <span>item B</span>
            </mat-toolbar>

            <div class="app-body">
                <router-outlet></router-outlet>
            </div>

        </mat-sidenav-container>
    <div>

style.css

    .app-body {
        overflow: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 64px;
    }

    .app-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

View more solutions

Comments

[Edric]

@Vega I'm guessing he wants a sticky toolbar.

[David Poxon]

This is excellent! However, in order to make the tabs sit in the regular position, I had to set margin-top to 64px instead of 55px.

[Seeven]

Thanks! I had trouble fixing a mat-toolbar inside a mat-sidenav, your demo rocks!. It's worth noting that ::ng-deep .mat-toolbar { ... } should be written in the component's CSS file and not in the general styles.css one.

[Balazs F.]

In part 2) you should go to the element directly BELOW the toolbar, and not to its parent. Also, use rather rem instead of px. link Otherwise decent answer.

[Pavindu]

position: sticky no longer works with angular 11.

[Ismaeel Sherif]

works on angular 12