раскрывающееся меню скрывается за панелью инструментов

Question

Я использую ionic4 / angular. при нажатии на ion-avatar должно отображаться раскрывающееся меню, но раскрывающееся меню скрывается на панели инструментов. Я попытался дать Z-индекс, но он не работает. Спасибо.

ссылка на стек *

<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>

Answer 1

Внутри shadow есть свойство root со значением stati c [без динамических c CSS переменных], которое мы можем переопределить как правило для ioni c shadow-element.

пример

Вы можете go с опцией popover ioni c framework

Answer 2

Please add or update css 

.toolbar{
    contain: inherit;
    overflow: visible;
}