Hello everyone,
I’m currently working on a project for an app. It’s a yelp like app and I have been banging my head against the wall for hours trying to figure out whats going wrong. my template displays a leaflet map(and getting that thing sized to 50% of the screen was the most convuluted thing ive done) and then under it, it displays an ion list of locations nearby. Im just trying to get this up and running for testing so I’m not using any live data. basically a leaflet map pulls up, can be centered on based on your location if you click a button as well and displays a static data list I threw in a json file and retrieve with a get factory i built. I attached an ion-scroll to the list and its not very large just 10 items, im just using the row/col grids to style the data for each item to prominentaly display each entry so it shows roughly 2 entries on my emulators and 4 on my browser and I can drag to scroll on ios emulator and on browser and I can SEE the other data from the list but as soon as I release the mouse it snaps back to the top of the list. I determined by removing scroll=false that my data extends way past the viewport and some of it doesnt display so that ion-scroll will scroll the rest of it, if i turn it back to false and oversize my browser it reveals more data as well. I can’t use hard pixel sizes to size my content because this is meant to be a cross platform app and I thought the view dynamically determines the size of the content and adjusts it to fit so I can’t find for the life of me why it overextends the list past the bottom of the viewport so I can’t scroll to see the data. I’ve included my template below any advice would be greatly appreciated!
<ion-view view-title="Location list" hide-nav-bar="true">
<ion-header-bar>
<button class="button icon-left ion-location button-clear" ng-click="CenterOnMe()"></button>
<label class="item item-input item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder"Search">
</label>
<button class="button icon-right ion-gear-a button-clear"></button>
</ion-header-bar>
<ion-content has-tabs="true" has-header="true" scroll="false">
<div data-tap-disabled="true">
<leaflet center="userPos" width="98vw" height="50vh" layers="layers"></leaflet>
</div>
<ion-scroll>
<ion-list>
<ion-item ng-repeat="item in locationList.locations">
<div class="row">
<div class="col"><h3>{{item.name}}</h3></div>
<div class="col">{{item.rating}}</div>
</div>
<div class="row">
<div class="col"><h6>0.25m away</h6></div>
<div class="col"><button class="button button-clear">PlaceHolder</button></div>
</div>
</ion-item>
</ion-list>
<ion-scroll>
</ion-content>