Popover positioning needs improvement

Short description of the problem:

Presenting a Popover with an event specified for positioning leads to silly positioning in most cases. Currently, the Popover is shown above or below the event target, even if that leads to huge portions of the Popover being off-screen. This can lead to downright ridiculous small (down to 1-line) sections of the Popover showing at the bottom of the screen. And, if the event target is a button that happens to be near the middle or bottom of a long ion-list, designer doesn’t even have control over that position. Landscape orientation is another situation that almost always leads to outrageous results.

And, we don’t want to make users scroll unless absolutely necessary, just for the sake of strictly positioning the Popover above/below the event target.

What behavior are you expecting?

Currently, the code currently tries to position the Popover below the event. If it doesn’t fit entirely below, it tries to fit it entirely above the event. Failing that, the Popover goes below the event. This is a toy algorithm, doesn’t even begin to deal reasonably with a majority of situations.

Suggestion 1 (preferred): after above/below fail, try full height to the left & right of the event, then fallback to centered on entire screen (as if no event target were specified). Suggestion 2: after above/below fail, center to screen as if no event target were specified.

Note: Related issue 6797 [popover is incorrectly placed the first time is opened] hinders working around this and probably interferes with implementing suggested fixes. The issue seems to be disregarded because you were unable to reproduce, but it’s a very real problem. The key step missing to reproduce is that the issue occurs only if use a templateUrl – not template. Suggest you revisit.

Steps to reproduce:

1. See code. Use non-trivial Popup. Try setting the event target at different screen positions, screen orientations.

  PresentPhotoEdit(ev) {
    let popover = this.popoverCtrl.create(CameraPopover);
    popover.present( {ev: ev} ); 
  }

Which Ionic Version? 2.x beta11

Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.11 Ionic CLI Version: 2.0.0-beta.37 Ionic App Lib Version: 2.0.0-beta.20 OS: Windows 7 SP1 Node Version: v4.4.5

[zakton5]

Related to popover positioning, it might be a nice idea to add another popover option for preferred position. For example, if I know that I’m going to want my popover to appear above the $event element, then i could specify position: 'top' in the popover options.

[gianpaj]

FYI: for others overlooking the docs.

I had this very simple Popover, but it’s wasn’t opening on the top right where the click event happened (like in the doc example).

@Component({
  template: `
    <ion-list>
      <button ion-item (click)="user.logout()">Logout</button>
      <button ion-item (click)="openPage()">Delete Account</button>
      <button ion-item (click)="close()">Cancel</button>
    </ion-list>
  `
})
export class PopoverMenu {
  constructor(public viewCtrl: ViewController,
              private nav: NavController,
              public user: UserService) {}

  close() {
    this.viewCtrl.dismiss();
  }

  openPage() {
    this.nav.push(DeleteAccountPage);
  }
}

@Component({
  selector: 'my-profile-page',
  templateUrl: 'index.html'
})
export class MyProfilePage implements OnInit {
  user: any;

  constructor(private userService: UserService,
              private popoverCtrl: PopoverController,
              private nav: NavController) {
  }

  ngOnInit() {
    this.user = this.userService.getUser();
    console.log(this.user);
  }

  openOptions(ev) { // <-- the fix
  openOptions() { // <-- the bug
    let popover = this.popoverCtrl.create(PopoverMenu);
    popover.present({ ev: ev }); // <-- the fix
    popover.present(); // <-- the bug
  }
}

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end>
      <!-- --- BELOW IS THE FIX -->
      <button ion-button icon-only (click)="openOptions($event)">
      <!-- --- BELOW IS WRONG -->
      <button ion-button icon-only (click)="openOptions()">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Now 🎉 :