Is it possible to get a visible vertical scrollbar in an ionic1 popover?
It is possible with fixed width and height to popover div and wrap the contents in ion-scroll directive
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.
OK, I believe I’ve stumbled upon an acceptable solution.
After tracing through the Ionic source code, one piece of the puzzle is that, when deployed to a device, Ionic creates instances of the ScrollNative class (as opposed to the Scroll class, which is used in the desktop browser).
The Scroll class contains a __createScrollbars() function, which it calls during initialization. ScrollNative has no such function.
So “not having scrollbars” on a device appears to be by design.
However, I also found that you can set the overflow-scroll property to false on an ion-content element (such as the one inside your ion-popover-view). That causes Ionic to use the Scroll class instead of the ScrollNative class, which gives us a vertical scroll bar in the popover!
But it isn’t visible until you start scrolling. If you want it visible all the time, you can include the following in your app’s style.css:
.scroll-bar-indicator.scroll-bar-fade-out {
opacity: 1;
}
(Of course, that will affect all scroll bars.)
what do you mean by ‘scrollbar’?
Try
overflow-y: scroll;
on your .scss file.