All,
I’ve got an issue with a scrollable area inside my content area. The scroll doesn’t work until the screen has been resized (i.e. either resizing the browser window or switching the phone to landscape). Once a resizing happens, it works normally – even when put back into portrait.
I made a video of the bug here: https://www.youtube.com/watch?v=howRij55e9c&feature=youtu.be
My code:
<ion-view title="Story Creation">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content scroll="false" padding="false">
<div class="viewport-background">
<ion-scroll direction="y" scrollbar-y="true" style="float: left;width:160px; height:275px;">
<div ng-repeat="friend in friendList" style="float:left; padding:2px;text-align:center;">
<img ng-src="{{friend.ImagePath}}" style="height:80px; width: 80px;;margin-left: auto; margin-right: auto;">
<br />
<span style="font-size: 11px;">{{friend.DisplayName}}</span>
</div>
<div ng-show="!friendList.length">
<em>No authors selected!</em>
</div>
</ion-scroll>
<div style="float: right;width:55%">
<div style="padding: 15px;">
<span>Story Title</span>
<input type="text" ng-model="story.Title">
</div>
<div style="padding: 15px;">
<span>Max Words Per Turn?</span>
<input type="number" min="5" max="100" ng-model="story.WordLimitPerTurn">
</div>
<div style="padding: 15px;">
<span>Days to respond</span>
<input type="number" ng-model="story.TimeLimitToResponse">
</div>
</div>
<br clear="all" />
<div class="padding">
<img style="margin-left: auto;margin-right: auto;display: block;" src="img/invite-friends-btn.png" ng-click="inviteMore(user)" /><br>
<img style="margin-left: auto;margin-right: auto;display: block;" src="img/tell-your-tale-btn.png" ng-click="tellTale(story)" />
</div>
</div>
</ion-content>
</ion-view>