1

I am developing a cordova application with onsen ui.

I already found some problems that occur only on windows phone (i assume that this is the case because wp is not supported for such a long time) . But there is 1 problem that i really need to fix.It seems that the ons-toolbar element is not fixed to the top in windows phone. If i scroll down, the toolbar also moves with the content. This doesn't happen on android.

Thats how i build up my page (the following code is inside an ons-sliding-menu):

<ons-page ng-controller="findUsersController">

<ons-toolbar fixed-style>
    <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
            <ons-icon icon="fa-bars">
        </ons-toolbar-button>
    </div>
    <!--<div class="left"><ons-back-button ons-if-platform="ios">Back</ons-back-button></div>-->
    <div class="center"><h3 style="display:inline;">Connect<span style="color:cornflowerblue;">Us</span></h3></div>
</ons-toolbar>


<ons-pull-hook ng-action="findUsers($done)" var="loader">
    <span ng-switch="loader.getCurrentState()">
        <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
        <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
        <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
    </span>
</ons-pull-hook>

<ons-list>
    <ons-list-item ng-show="users.length === 0">
        <div class="info">
            Pull down to refresh
        </div>
    </ons-list-item>
    <ons-list-item class="item" ng-repeat="user in users">
        <ons-row>
            <ons-col width="80px">
                <img ng-src="http://lorempixel.com/60/60/?{{user.rand}}" class="item-thum" />
            </ons-col>
            <ons-col>
                <p class="item-desc">{{ user.username }}</p>
            </ons-col>
        </ons-row>
    </ons-list-item>
</ons-list>  
</ons-page>

Initially everything shows up correct, but when i pull down to refresh, the toolbar moves down as well and the ons-pull-hook doesn't react. How can this be? i mean the toolbar is in no scrollable element.

Is there anyone who has an idea how to fix this problem?

DominikP
  • 151
  • 1
  • 10

0 Answers0