The scroll can be disabled as any other ion-content element by just using <ion-content scroll="false">
If your popover uses headers/footers, you’ll also need to add this:
ion-popover-view.fit ion-header-bar,
ion-popover-view.fit ion-footer-bar {
position: relative !important;
}
ion-popover-view.popover .has-header {
top: 0 !important;
}
ion-popover-view.popover .has-footer {
bottom: 0 !important;
}this method seems to be broken in the latest rc, unfortunately:
See the Pen NPmmOG by Matt Prestlien (@mattchue) on CodePen.
For me i solved with.
.popover .scroll-content{
overflow: visible!important;}
and few more css to beauty my popover theme 
…
hope to be helpfull…
with love From Dominican Republic.
1 Like
This doesn’t fix it for me. Seems like this only fixes the items being shown, but not the enclosing popover.
With the help from @weeman, I have implemented the following solution. Works both for larger and smaller content, preserves the rounded corners on iOS:
ion-popover-view.fit {
height: auto;
}
ion-popover-view.fit ion-content {
position: relative;
}
.platform-android ion-popover-view.fit {
margin-top: 10px;
}
.platform-ios ion-popover-view.fit {
padding-top: 10px;
padding-bottom: 10px;
}
See the demo: http://codepen.io/vladius/pen/VLEOQo
Note, that I have also disabled the menu scroll for this demo.
10 Likes
Very nice stuff! Thanks!
Does anyone have a solution with scroll enabled? All solutions are nice but not clean.
savior! this fix really worked for what I was looking for!
That’s a really cool solution @vladius !
However, that top and bottom padding doesn’t look so good on iOS. I think in this case it is better to use border-radius on the first and last items. I made a fork of your CodePen to demonstrate: http://codepen.io/andutm/pen/ONXoRr
Relevant part:
.platform-ios ion-popover-view.fit .item:first-child {
border-radius: 10px 10px 0 0;
}
.platform-ios ion-popover-view.fit .item:last-child {
border-radius: 0 0 10px 10px;
}
Even better, if using Ionic SASS variables:
.platform-ios ion-popover-view.fit {
.item:first-child {
border-radius: $popover-border-radius-ios $popover-border-radius-ios 0 0;
}
.item:last-child {
border-radius: 0 0 $popover-border-radius-ios $popover-border-radius-ios;
}
}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.
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.