Thanks for your reply.
I’ve attempted to get that to work, and have not been successful.
I should add that if I preview the app in a desktop browser, the vertical scroll indicator appears during the scrolling. However, it never appears when the app is deployed to a device (Android 6 tablet, in this particular test case).
For example, I have the following code in my template:
<script id="survey-report-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<a class="item">Item 1</a>
<a class="item">Item 2</a>
<a class="item">Item 3</a>
<a class="item">Item 4</a>
<a class="item">Item 5</a>
<a class="item">Item 6</a>
<a class="item">Item 7</a>
<a class="item">Item 8</a>
<a class="item">Item 9</a>
<a class="item">Item 10</a>
</div>
</ion-content>
</ion-popover-view>
</script>
In the desktop browser, this will render as:
<div class="popover-backdrop active">
<div class="popover-wrapper" ng-transclude="">
<ion-popover-view class="popover none ng-enter active ng-enter-active" style="top: 63px; left: 1170px; margin-left: 0px; opacity: 1;">
<ion-content class="scroll-content ionic-scroll">
<div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);">
<div class="list">
<a class="item">Item 1</a>
<a class="item">Item 2</a>
<a class="item">Item 3</a>
<a class="item">Item 4</a>
<a class="item">Item 5</a>
<a class="item">Item 6</a>
<a class="item">Item 7</a>
<a class="item">Item 8</a>
<a class="item">Item 9</a>
<a class="item">Item 10</a>
</div>
</div>
<div class="scroll-bar scroll-bar-v">
<div class="scroll-bar-indicator scroll-bar-fade-out" style="transform: translate3d(0px, 0px, 0px) scaleY(1); height: 143px;"></div>
</div>
</ion-content>
<div class="popover-arrow" style="left: 327px;"></div>
</ion-popover-view>
</div>
</div>
But when deployed to the device, it renders as:
<div class="popover-backdrop active">
<div class="popover-wrapper" ng-transclude="">
<ion-popover-view class="popover none ng-enter active ng-enter-active" style="top: 63px; left: 594px; margin-left: 0px; opacity: 1;">
<ion-content class="scroll-content ionic-scroll overflow-scroll">
<div class="scroll">
<div class="list">
<a class="item">Item 1</a>
<a class="item">Item 2</a>
<a class="item">Item 3</a>
<a class="item">Item 4</a>
<a class="item">Item 5</a>
<a class="item">Item 6</a>
<a class="item">Item 7</a>
<a class="item">Item 8</a>
<a class="item">Item 9</a>
<a class="item">Item 10</a>
</div>
</div>
</ion-content>
<div class="popover-arrow" style="left: 327px;"></div>
</ion-popover-view>
</div>
</div>
Note the lack of a <div class="scroll-bar"> block in the second rendering.
Do you have a working example of using <ion-scroll> that you can share?
Or do you know of a way to get the above code to render in the same way on a device as it does in a desktop browser?
Thanks!
Incidentally, I’m working on this because the “accepted” way of resizing the ion-popover (as documented here, using a custom “fit” class) seems to be breaking the scroll-ability of the view if there are more elements in the list than can be displayed on the device. If someone knows how to fix that, that would be an acceptable alternative.