Modals, Popover and ion-select not showing

Ionic Framework
21

Ok then I understood it atleast, but I have still no clue why I got my issues. I mean I could Reproduce, that its something about popups overall. I mean ion select is not working too and that doesn’t need any Imports. When I’m clicking one of the buttons for the Modal/Popover or the Label for Ion Select, in Chrome the element body.backdrop-no-scoll gets added under styles so something is happening.

Is there a possiblility that the Popups are opend in the Background or in the Background of another Page?

22

Can you show how you are calling the presentPopover method in the template?

23

Yeah sure, this is how I’m calling it:

    <ion-item detail lines="full">
      <ion-label (click)="presentPopover($event)">
        Bewertung
      </ion-label>
    </ion-item>
24

Try implementing the click on the item itself instead of the label

25

Thanks but didn’t work either :confused:

26

And there is still no console log?

Try adding await to the controller present() method

27

Nothing changed :confused:
I will start writing all new now and hope that it works then…

28

EDIT: I finally found the problem, my app.component.html was looking like this:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="shop">
      <ion-icon name="cart"></ion-icon>
      <ion-label>Shop</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="inbox" (click)="loginrequired()">
      <ion-icon name="mail"></ion-icon>
      <ion-label>Postfach</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile" (click)="loginrequired()">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="more">
      <ion-icon name="ellipsis-horizontal"></ion-icon>
      <ion-label>Mehr</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

But it has to look like this:

<ion-app>

  <ion-router-outlet></ion-router-outlet>

  <ion-tabs>

    <ion-tab-bar slot="bottom">

      

      <ion-tab-button tab="home">

        <ion-icon name="home"></ion-icon>

        <ion-label>Home</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="shop">

        <ion-icon name="cart"></ion-icon>

        <ion-label>Shop</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="inbox" (click)="loginrequired()">

        <ion-icon name="mail"></ion-icon>

        <ion-label>Postfach</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="profile" (click)="loginrequired()">

        <ion-icon name="person"></ion-icon>

        <ion-label>Profile</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="more">

        <ion-icon name="ellipsis-horizontal"></ion-icon>

        <ion-label>Mehr</ion-label>

      </ion-tab-button>

    </ion-tab-bar>

  </ion-tabs>

</ion-app>