How to show scrollbars in onsen ui app list

Question

I'm using Onsen Ui to build a hybrid Phonegap app. There are lists on some pages with 100's of items. But, the scrollbars are not showing. Is there anyway to show native like scrollbars on the page?

Here is the code I'm using:

          <ons-row >
              <ons-col align="center" >
                <ons-list  class="scrollme" ng-scrollbar is-bar-shown="true">
                    <ons-list-item modifier="tappable" ng-repeat="hotel in hotels" ng-click="viewHotel(hotel);">
                        <div class="hotel-item">
                            <img preload-image ng-src="http://domain.com/{{hotel.thumbNailUrl}}" default-image="img/loader.gif" alt="Thumbnail" class="testimage">
                            <div class="gradient-overlay" style="text-align: center">
                                <div class="details">
                                    <h4>{{hotel.name}}</h4>
                                    <h4>{{hotel.rateCurrencyCode + " " + hotel.highRate}}
                                </div>
                            </div>
                        </div>
                    </ons-list-item>
                    <ons-button type="cta" should-spin="{{isFetching}}" 
                        ng-show="moreResultsAvailable" ng-click="loadMore()" class="loadMore">More Results</ons-button>
                </ons-list> 
              </ons-col>
            </ons-row>

Update

I have tried this ng-scrollbar , But it's not working. Scrollbar itself scrolls up when I scroll the list.

Steven de Salas · Answer 1 · 2015-07-12T00:16:55.200

The onsenui.css file bundled with Onsen UI is hiding the scrollbar using this code:

::-webkit-scrollbar {
    display: none;
}

To enable the scrollbars, you only need to un-do this by overriding the functionality, for example by adding this code to your index.html:

<style>
::-webkit-scrollbar {
    display: block !important;
    width: 5px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); 
}
</style>

WARNING

While this approach seems to work in the particular flavour of app I put together (Android only). The fact the development team hid the scrollbar, and don't have a way to put it back on the screen yet (see other answer by @Andy), makes me think that there might be some unwanted side-effects to re-enabling the scrollbar at the CSS level, (Im thinking along the lines of problems with the lazy-repeat control or cross-platform differences in look and feel). In other words: use at your own risk.

score 2 · Accepted Answer · answered May 11 '15 at 07:40

2

Despite native apps, Onsen UI doesn't have a scrollbar element yet (version 1.3.1), but there are good chances that it will be implemented in the near future.

Source: I'm an Onsen UI development team member

answered May 11 '15 at 07:40

Andi Pavllo

2,506
4
18
30

So, is there any alternative I can use for the time being? – Danish Jamil May 11 '15 at 07:46
I'm afraid that there is nothing at the moment, except trying to develop it by your own. Of course, it's not so simple. – Andi Pavllo May 11 '15 at 08:01
Ok, thanks for your help. So, when is the next version of Onsen UI releasing? – Danish Jamil May 11 '15 at 08:19
Soon, there isn't a release date yet, but the scrollbar element will not be implemented in the next release. – Andi Pavllo May 11 '15 at 08:26
Ok, I have tried using default scrollbars of browser, I thought I would customize it to look better on phone. But, not showing at all... here is some sample code

...

...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...

– Danish Jamil May 11 '15 at 10:18

score 0 · Answer 3 · answered Oct 12 '15 at 05:24

In latest release of onsen-ui, now <ons-scroller> is used to scrolling purpose, so you can add it in your hmtl like bellow

<ons-scroller style="height: 200px; width: 100%">
<ons-row >
  <ons-col align="center" >
    <ons-list  class="scrollme" ng-scrollbar is-bar-shown="true">
        <ons-list-item modifier="tappable" ng-repeat="hotel in hotels" ng-click="viewHotel(hotel);">
            <div class="hotel-item">
                <img preload-image ng-src="http://domain.com/{{hotel.thumbNailUrl}}" default-image="img/loader.gif" alt="Thumbnail" class="testimage">
                <div class="gradient-overlay" style="text-align: center">
                    <div class="details">
                        <h4>{{hotel.name}}</h4>
                        <h4>{{hotel.rateCurrencyCode + " " + hotel.highRate}}
                    </div>
                </div>
            </div>
        </ons-list-item>
        <ons-button type="cta" should-spin="{{isFetching}}" 
            ng-show="moreResultsAvailable" ng-click="loadMore()" class="loadMore">More Results</ons-button>
    </ons-list> 
  </ons-col>
</ons-row>
</ons-scroller>

How to show scrollbars in onsen ui app list

3 Answers3