CODEWITHSUNDEEP
htmlcssangular
physicsboy
physicsboy

Reputation: 6348

angular/material - how to get mat-toolbar shadow over the page content?

I currently have a standard layout for my app, toolbar with a fixed sidenav and content section. I have since discovered that I can get the drop shadow on the toolbar with the class inclusion mat-elevation-z4, however I cannot seem to get the shadow to overlay the content section when I have scrolled down in the section itself.

I have also attempted to use the z-index to correct this...

mat-toolbar I gave z-index: 2 and <div class="container"> I gave z-index: -1

If somebody could give me some advice, I would be grateful.

Upvotes: 9

Views: 18771

Answers (5)

Aharon Ohayon
Aharon Ohayon

Reputation: 1269

I had to do both of the suggested solutions (Rahul's and K K's) in order to make it work:

  1. I added to the mat-toolbar a position: relative and a z-index so the shadow will override the content below the toolbar:
.mat-toolbar {
    position: relative;

    z-index: 5;
}
  1. I added elevation to the toolbar one of the "shadow" classes:
<mat-toolbar class="mat-elevation-z8" color="primary">
...
</mat-toolbar>

Upvotes: 1

Rahul.S
Rahul.S

Reputation: 413

Predefined CSS classes

The easiest way to add elevation to an element is to simply add one of the predefined CSS classes mat-elevation-z# where # is the elevation number you want, 0-24. Dynamic elevation can be achieved by switching elevation classes:

<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>

Upvotes: 4

Juan
Juan

Reputation: 2084

Add style="position: relative" to the toolbar.

Upvotes: 0

K K
K K

Reputation: 18099

The issue is because of the z-index. The toolbar is overshadowed by the content section which affects the box-shadow of toolbar. In order to keep the box-shadow visible, you need to give a higher z-index to toolbar (which you already did). But Z-index works on positioned elements, hence provide position to the .mat-toolbar.

Example:

.mat-toolbar {
  position: relative;
}

Upvotes: 28

Overflowrun
Overflowrun

Reputation: 547

Provide some positioning for that element

 position: relative; or     position: absolute;

this is worked for me 

.mat-toolbar.mat-primary {
    background: #3f51b5;
    color: #fff;
    position: relative;
}

Upvotes: 3

Related Questions