Popover sizing

Thanks for your development on that topic, @andu
An even better solution that supports single-item lists would be:

.platform-ios ion-popover-view.fit {
  .item:first-child {
    @include border-top-radius($popover-border-radius-ios);
  }
  .item:last-child {
    @include border-bottom-radius($popover-border-radius-ios);
  }
}

So the most up to date fit solution for, both vertical and horizontal and Sass-based is as follows:

// Auto-resizeable "fitted" pop-overs. Taken from here: https://forum.ionicframework.com/t/popover-sizing/8251
ion-popover-view.fit {
  width: auto;
  height: auto;
  ion-content {
    position: relative;
  }
}

.platform-android ion-popover-view.fit {
  margin-top: 10px;
}

.platform-ios ion-popover-view.fit {
  .item:first-child {
    @include border-top-radius($popover-border-radius-ios);
  }
  .item:last-child {
    @include border-bottom-radius($popover-border-radius-ios);
  }
}
1 Like

@vladius this doesn’t appear to be quite right for android as it does not open in the proper position for example overlapping the header. Instead it is opening up under the header. It will work if you remove:

.platform-android ion-popover-view.fit {
  margin-top: 10px;
}

@vladius I tried your code in our css file, but i have ion list with more ion items in the list. Each list having popover action provided with the button. When the list is in scrollable area, popover content fits properly, but when list is scrolled then popover size is not proper. “Snooze” & “Mail” is inside popover.

this is a good way but will be applied to all the nested popovers.

ion-content scroll=“false”

Popularity

How to make the popover row width fit the entire screen just the way list item would? I have a Search box that suggests results. I would like the items length equal to search box.

popover is out of the page so if u want to get control over it you can do it by selecting whatever selector out of the page selector the .css file so it shuold look like this


your-page-name{
    //your page css here 
}

ion-popover{
    .popover-content{
        width: 250px !important;
    }
}
1 Like

This one worked for me

This method isn’t working for me. I think its because the popup window is rendered before certain

evaluated Once its evaluated the div is displayed and now takes up more real estate pushing content outside of the already rendered popup. Its the only thing I can think of why my content is showing up outside the popup window.