Popover is only opening at the bottom (ignoring ConnectionPositionPair)

[sandgupta23]

Reproduction

https://stackblitz.com/edit/angular-xcflxa?file=src%2Fapp%2Fapp.component.html

Please look into popover.service.ts
-------------------
ConnectionPositionPair is: [
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'top',
      },
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'top'
      },
    ];

Steps to reproduce:

1. Open stackblitz
2. Click on the button

Expected Behavior

There should be a way to open popover at the top of the button

Expection position is shown in below sketch:

Actual Behavior

Popover is only opening at the bottom

What behavior did you actually see?

Environment

"@angular/animations": "^7.1.0",
"@angular/cdk": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/material": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/platform-server": "^7.1.0",
"@angular/pwa": "^0.7.5",
"@angular/router": "^7.1.0",
"@angular/service-worker": "^7.1.0",
"@angularclass/hmr": "^2.1.3",

• Browser(s):
  Chrome
• Operating System (e.g. Windows, macOS, Ubuntu):
  Windows

[crisbeto]

It's because your position config is set up so that the top of the overlay is aligned with the top of the trigger. If you want it to show up above you should do this:

{
  originX: 'start',
  originY: 'top',
  overlayX: 'start',
  overlayY: 'bottom'
}

[sandgupta23]

@crisbeto Thanks a lot for your help.
Your solution works in stackblitz but doesn't work in my local. Local code and stackblitz code are identical. Strange.
I am stuck with this bug for months. If it's not too much to ask, can you pls checkout my repo.

My local repo link: https://github.com/goodmite/angular-popover-bug

Picture of my local after applying your solution:

[crisbeto]

Depending on how much space it has on top it might end up falling back to showing below. You can try passing in only one position config.

[sandgupta23]

It has a lot of space.
I am using this:

private getPositions(): ConnectionPositionPair[] {
    return [
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'bottom'
      }
    ];
  }

Full picture of my local:

[crisbeto]

Sorry for the delay here, I must've missed the notification in between everything else. Is this still an issue? I'm guessing that your primary position isn't being picked, because the fallback position would still show a larger area of the overlay. We pick which position to show based on what percentage of the overlay content will be shown. You can give a connected position a weight if you want it to rank higher.

[crisbeto]

Closing due to a lack of activity.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}