Please add or update css
.toolbar{
contain: inherit;
overflow: visible;
}
Solution 1 :
Solution 2 :
There are contain property inside shadow-root with static value [ without dynamic CSS variables ] and that we can override as rule of ionic shadow-element.
You can go with popover option of ionic framework
Solution 3 :
I couldn’t get it working with a dropdown but instead I used the ionic popover component and just implemented something myself.
Problem :
i am using ionic4/angular. on-clicking on the ion-avatar a dropdown menu should display but the dropdown menu is hiding in the toolbar. i tried giving z-index but it is not working. Thanks.
<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>Comments
Comment posted by maddy23285
I don’t know much about angular but you can try placing your dropdown menu code outside the
Comment posted by Prem
no its not working
Comment posted by Prem
there is no toolbar class. can u edit the stackblitz
Comment posted by Deepak
please check given URL
Comment posted by Prem
It is working in stackblitz but not working in actual project. anyway thankyou