Ion-scroll inside $ionicPopup is not scrolling


#1

I am building a search-complete function inside an $ionicPopup instance, where a list of matching terms is generated on keyup inside a text box, like in this image:

To achieve this look, the results are generated by ng-repeat and are contained in an ion-scroll element inside a parent container div. The ion-scroll element has the class results-list and is is contained inside a div with class search-results, which has the following styling:

.search-results {
    position: absolute;
    left: 0;
    height: 250px;
    width: 100%;
    z-index: 3;
    box-sizing: border-box;
    padding: inherit;
    padding-top: 0;

    .results-list {
        border-radius: 5px;
        border: 1px solid #999;
        background: #fff;
        overflow-y: hidden;
        max-height: 100%;
    }
}

The HTML code for this results list is defined in the template parameter of the $ionicPopup.show() parameter object. The results list is populated with ng-repeat and the parent div of the ion-scroll object is shown or hidden with ng-hide depending on the contents of the input field.

Sometimes this list can be very long and I’ve capped the height at around 3 entries or so. My problem is that in this scenario, on a device, I cannot scroll in the results list. I can scroll the results list in Chrome via ionic serve, but cannot do this when testing on Android.

Is this a problem that requires the use of scroll delegates? If so, how do I make scroll delegates work with $ionicPopup which generates its own HTML structure?


#2

Can you share some code or an codepen example. If there is a list with ng-repeat within a popup, it should scroll automatically.