Ion-scroll'd ion-list appears to extend way past viewport and i cannot scroll data

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>

Hello folks,

Wanted to update this, I find the solution. You have to explicitly style in-line, using css will not work period, whether overriding the default syle of ion-scroll or making a new style class to use, it completely ignores it I had to explicitly set the style in the tag.

<ion-scroll style="width:100vw;height:50vh">

Now I have an issue with the list going past the tab-bar and not displaying the final entry, hopefully should be able to make a solution for that quickly. anyways wanted to share this info.

Just wanted to thank you for coming back and posting the solution!
You saved me some time with a very similar issue.

Not sure if it’s available in your version of ionic but try breaking up your data into items and put it in a list, eg:

    <ion-list>
        <ion-item>
            <ion-row center>
                <ion-col width-20>
                    <div><img src="img/....jpg"></div>
                </ion-col>
                <ion-col width-80>
                <div><h2>Title</h2></div>
                </ion-col>
            </ion-row>
       </ion-item>

       <ion-item>
         Something...
        </ion-item>

       <ion-item>
         Something...
        </ion-item>

         .....
     </ion-list>

In my experience once objects are placed in a list and the number of items exceed the screen size, the list becomes scroll-able. Using ionic2…