Popover starting in different places

[discodane]

Working with Ionic 2 rc.3. The flow goes like this: I have 2 cards at the top of the ionic content that show metrics. When you click either of them, a popover will show up and show more detail metrics. However, the popover shows up in different places on the screen based off where I click the card. See screenshots:

This happens when I click around the header of the “Hours vs. Planned” card

This happens when I click around the green triangle of the card

This happens when I click anywhere else on the card

My click function is located at the ionic card like this:

<ion-card tappable (click)="presentPopoverHvp($event)" class='custom-card'>

My intent is to format the popover to cover both the cards at full width, but I can’t adjust the top margin at a constant rate if the popover is starting at different spots.

Is this a bug? Or is there something that I can do to ensure that the popover will start at the same spot every time?

[mhartington]

Hmm, does the triangle have a click handler on it?

Can you share the markup for the cards

[discodane]

Yeah my first thought was I had multiple click handlers. Here is my full markup:

<ion-card tappable (click)="presentPopoverHvp($event)" class='custom-card'>
    <ion-card-header>
        Hours vs. Planned
    </ion-card-header>
    <ion-card-content>
            <div class='week-metric-value'><span *ngIf="hvpNumber > 0"> +</span>{{hvpNumber | number: '1.0-0'}}</div>            
    </ion-card-content>
    <div class='green-tri'>
        <img src={{greenTriPath}}/>
    </div>
</ion-card>