Ionic Popover content not showing

Ionic Framework Ionic Vue
1

I am trying to display a simple popover with ionic/vue. The popover seems to be triggered correctly and the arrow is showing on iOS devices but the content itself is not being rendered at all.

During some troubleshooting the “SettingsMenu” is rendered properly when displayed on it’s own as but without the use of a popover.

Very grateful for any input as this seems like a very trivial thing to sort out?

what works:

Button

<ion-buttons slot="end">
    <slot name="actions-end"></slot>
    <ion-button  @click="openPopover" slot="end">
       <ion-icon slot="icon-only" :icon="ellipsisVerticalSharp">Show Settings</ion-icon>
    </ion-button>           
</ion-buttons>

Content

import SettingsMenu from '../popovers/settings.vue';

Popover Controller

methods: {
    async openPopover(ev) {
      const popover = await popoverController
        .create({
          component: SettingsMenu,
          cssClass: 'my-custom-class',
          event: ev,
          translucent: true
        });
      return popover.present();
    },
  }

Settings.vue

<template>
  <ion-content class="ion-padding">
     Settings Content
  </ion-content>
</template>

<script>
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'SettingsMenu',
  components: { IonContent }
});
</script>
2

Your code works fine on my end. Is it not something in your CSS?

3

Thanks for having a look - is “Settings Content” being rendered for you? I can’t see it anywhere in inspect element.

4

Try passing the click event:

 <ion-button  @click="openPopover($event)" slot="end">

This should position the popover relative to the button.

5

The issue I am having is that no content is being rendered at all rather than it being a positioning issue. As you can see the popover is empty.

image
image884×514 34.1 KB

6

Yes. Here is a demo and repo.

7

Got it! Clearly, something is up. The demo by @dlodeprojuicer works as expected.

8

yeah I’ll have a look at it and report back. And thanks @dlodeprojuicer

9

gents thank you for your inputs. The issue was a missing element in App.vue

1 Like