How to set popover position when clicking on tab?

Ionic Framework ionic-v3
1

I try to show popover near my tab with “more” icon, but it’s shows on the center.
Also I have an error when I click backdrop from popover (but only when I send event as a parameter to popover.present({ev: event})).
It’s only works when I use button for popover, but I can’t add it to tabs.
Any thoughts?

Error
browser_adapter.js:84 EXCEPTION: Error in ./PopoverCmp class PopoverCmp
browser_adapter.js:84 RangeError: Maximum call stack size exceeded
at _baseExtend (util.js:49)

tabs.html

<ion-tabs>
  <ion-tab (ionSelect)="presentPopover($event)" tabIcon="more"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { PopoverController } from 'ionic-angular';
import { SettingsPopoverPage } from '../settings-popover/settings-popover';


@Component({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {

  constructor(private popoverCtrl: PopoverController) {
  }

  presentPopover(event) {
    let popover = this.popoverCtrl.create(SettingsPopoverPage, {}, {
      cssClass: 'settings-popover'
    });
    popover.present({ev: event});
  }
}
2 Likes
2

Have you found a good solution for opening a Popover-Menu from a ion-tab ?

Including these challenges:

  • Correct positioning
  • Closing popover by clicking in the background or clicking the tab icon again (or any other tab icon)

Thanks

3

Hi,

I have a same problem. When clicking on tab with “more” icon, popover is showed up in the center.
Did you find any solution?

4

Sorry to say, but ion-tabs are not working in Ionic2. They can’t have childs, nor push to some page it always create an error. This is stated in Github multiple times.

What I did as a workaround, is to use segments inside of tabs. That allows for inside navigation in each tab.

Hope that helps :slight_smile:

5

What exactly do you mean by not working? A tab perfectly allows navigation as for as I know and you can even switch outside of a tab into another top level page if you want do so. What has this got to do with the related topic (perhaps your answer was mistakenly placed in this topic) since it’s about the popover?

@Meliha Could you work out a small piece of code so we can see your current setup? Maybe we can figure out how to make this work :slight_smile:

6

Hi @luukschoen,

Thanks for your answer. Here is my piece of code to create the case.

public presentPopover(event: any) {

  let popover = this._popoverCtrl.create(SamplePopover);

  popover.present({
      ev: event
  });

}

in html

'<'ion-tab tabTitle=“Contact” tabIcon=“contacts” (ionSelect)=“presentPopover($event)”>

And when I select Contact tab result:

image
image292×520 21.9 KB

7

It’s simple. Try to build a simple navigation tab with chlidren pages.
Then, try to push a children page from a tab. Break.

Of course, pushing to some other page will work, What I mean is a sub-page of a tab. Using simple things as navcontroller in ionic 2.

Regards,

8

This may not be the most future-proof solution since it relies on private members, but this is what I got working…

OP’s code works with minor adjustment… instead of:

popover.present({ev: event});

Do this:

popover.present({ev: {target: event.btn._elementRef.nativeElement}});

The $event passed in ionSelect is not a click event, it is a Tab component. You can fake a click event to the extent necessary by making an object that sets the target to the native element of the tab’s button as shown. The PopoverController uses this to determine where to popup with the pointer pointing at the target element.

1 Like
9

Hi, so how can I change the position of the popup to my desire spot?