CODEWITHSUNDEEP
htmlcssionic-frameworkbootstrap-4ionic4
Prem
Prem

Reputation: 124

dropdown menu is hiding behind toolbar

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.

stackblitz link

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

Upvotes: 0

Views: 1332

Answers (3)

Joseph Moore
Joseph Moore

Reputation: 384

I couldn't get it working with a dropdown but instead I used the ionic popover component and just implemented something myself.

https://ionicframework.com/docs/api/popover

Upvotes: 0

cakePHP
cakePHP

Reputation: 465

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.

example

You can go with popover option of ionic framework

Upvotes: 2

Deepak
Deepak

Reputation: 55

Please add or update css 

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

Upvotes: 2

Related Questions