I am using Ionic to create a map based app. App creates markers dynamically and when user clicks on a marker an InfoWindow is shown with mixed content, image, text, list. For map i am using Angular Google Maps. Map is showing, markers are getting added, InfoWindow are showing with appropriate information on devices, Android and iOS. I am able to interact with custom button in the InfoWindow. I am facing problem while integrating scrollable list in InfoWindow.
When I add a list in the InfoWindow, (not 'ion-list" but “scroll”, though ion-list doesn’t work either), it just doesn’t buzz. Similar behavior on browser and devices. When I use a plain vanilla div with overflow the scrollbars show and scrolling works, of course it doesn’t recognize touch and is ugly.
Have a look at following fork i quickly did by changing the content string of InfoWindow markup and ion-content’s scroll and data-tap-disabled attributes. Click on the marker, InfoWindow will open and will show two div’s - red at the top and green at the bottom. The green one has four items. Try to scroll the green div. It doesn’t scroll. Am I missing something?
See the Pen Google Maps Example: nightly by Sanjay Sharma (@sanjayatpilcrow) on CodePen.
Update: Quickly created one more marker+InfoWindow in the pen which shows a normal div with vertical scroll bar.