I have problem with angular Dialog material and the header of my Web page I create Header component and its position is sticky top and I use angular Dialog material when the dialog box open it is appear under the header and the header cover the dialog contents
when I set the header position inherit it will not be sticky anymore
header html
<nav class="header navbar header-inhert ">
<a class="navbar-brand ms-2 " href="#"><img src="../assets/imgs/QuickTic-removebg-preview.png"style="width:79px;"></a>
<div class="dropdown" style="float:right;">
<button class="dropbtn"> <img src="../assets/imgs/userlogo.png" alt="" class="user-image font-weight-bold mr-1 p-2" />{{name}}, Wleome <fa-icon [icon]="icondown"></fa-icon></button>
<div class="dropdown-content">
<a routerLink="/user" ><fa-icon [icon]="iconhome"></fa-icon> Home</a>
<a routerLink="/profile"><fa-icon [icon]="iconuser"></fa-icon> User Profile</a>
<a routerLink="/login"><fa-icon [icon]="iconlogout"></fa-icon> Log out</a>
</div>
</div>
</nav>
header css
.header{
background:linear-gradient(150deg, rgba(153,226,180,1) 0%, rgba(120,198,163,1) 50%, rgba(86,171,145,1) 67%);
}
.navbar{
--bs-navbar-padding-y: -0.5rem;
}
.header-inhert{
position: inherit;
top: 0;
z-index: 1020;
}
.dropbtn {
background-color: transparent;
color: #1c6159;
padding: 16px;
font-size: 14px;
border: none;
cursor: pointer;
margin-left: 900;
/* margin-right: 1000; */
}
.user-image {
border-radius: 50%;
width: 50px;
height: 50px;
align-items: center;
&-icon {
height: 18px;
font-size: 16px;
}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #1c6159;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover{background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color:transparent;
}
Where I call header html
<app-header></app-header>
<body>
.
.
.
</body>
Where I call dialog
addTicket() {
const dialogRef = this.dialog.open(TicketFormComponent, {
// width:'500px',
});
dialogRef.afterClosed().subscribe(result => {
});
here when the user click button will call this function
this is the the dialog when the header sticky
and this is what should the dialog be but here the header not fixed
