When using ionic4/angular, I want a dropdown menu to display upon clicking on the ion-avatar. However, the dropdown menu is hiding in the toolbar. I have tried setting z-index but it did not work. Any suggestions would be appreciated.
You can find the stackblitz link here
<ion-header>
<ion-toolbar color="tertiary" >
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<button class="btn btn-light">My Courses</button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button class="iconbell">
<ion-icon name="notifications-outline" size="large"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<div class="dropdown">
<ion-avatar class="dropdown-toggle" style="margin-right:10px;height: 5vh;width: 5vh;" id="menu1" type="button" data-toggle="dropdown">
<img [src]="user['profpic']"> <span class="caret"></span>
</ion-avatar>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
</ion-buttons>
</ion-toolbar>
</ion-header>