Ionic popover position issue

ionic-v1
1

Hi, I am trying to use pop over. everything looks good. This control is something I am waiting for some time.
But one ting is, when I ran my app in my device, the position of the popover is not correct. It looks fine when I tried in simulator. Attached is the screenshots.
Can some one let me know is there any thing I am missing here?

Here is my Index.html code:

<body>
    <ion-nav-bar class="bar-positive" animation="no-animation" align-title="left">
        <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view animation="slide-left-right2"></ion-nav-view>
</body>

Here is my view.html

<ion-view hide-back-button="false" title="Test Popover" ng-controller="homeCtrl as vm">
    <ion-nav-buttons side="right">       
        <a class="button button-icon ion-gear-b" ng-click="vm.popover.show($event)"></a>
    </ion-nav-buttons>
    <ion-content>
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">Version</span>
                <div class="item-text-wrap">{{vm.version}}</div>
            </label>
            <label class="item item-input item-stacked-label">
                <div class="input-label">Date </div>
                <div calss="item-text-wrap">{{vm.buildDate | date:'MMMM dd yyyy'}}</div>
            </label>
        </div>
    </ion-content>
</ion-view>

here is my popover.html

<ion-popover-view style="height: 125px;">
    <ion-content>
        <div class="list positive">
            <a class="item ion-gear-b" >
                Settings
            </a>
            <a class="item ion-speakerphone" >
                Feedback
            </a>
        </div>
    </ion-content>
</ion-popover-view>

image
Pasted image2393×1461 62 KB

2

I just found some thing. In ionic css we have below CSS style. I I comment out margin-top it is positioning properly

I think this CSS is specific for android device. I am little confused why I need to modify this CSS to get it work. Any idea? I really don’t want to modify ionic.css styles.

Also, one more thing, if we observe popover, border between two menu items are missing. Definitely I am missing something. Possibly I am not using right CSS style. Can some one help me with this.

.platform-android .popover {
 /* margin-top: -32px;*/
  background-color: #fafafa;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
  .platform-android .popover .item {
    border-color: #fafafa;
    background-color: #fafafa;
    color: #4d4d4d; }
  .platform-android .popover.popover-bottom {
    margin-top: 32px; }
.platform-android .popover-backdrop, .platform-android .popover-backdrop.active {
  background-color: transparent; }

image

3

I’ve got the same problem. Did you already found a solution?

4

Used this in ionic 2 and it worked for me. Didn’t touched ionic.css.

.popover-md .popover-content {
  top: 45px !important
}