Popover positioning needs improvement

[ionitron-bot]

Original issue by @softhorizons on 2016-08-20T18:32:50Z

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