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?