0

I have this ui-select on my code. I am building a mobile app with Ionic and AngularJS. 

<ui-select name="org" ng-model="user.org.selected" theme="selectize" class="form-control ng-pristine ng-invalid ng-invalid-required" style="margin-top: -5px; margin-left: 7px;" required>
   <ui-select-match placeholder="Organization Name" focus-me="true">{{$select.selected.name}}</ui-select-match>
      <ui-select-choices  repeat="item in rea_list | filter: $select.search |limitTo: 20" position="down">
         <div ng-bind-html="item.name | highlight: $select.search"></div>
      </ui-select-choices>
</ui-select>

When i put this code on an ionicPopup, i can scroll the list of options to view the 20 options in the list but if i put this code on my ion-view on a page or in an ionicModal, i cant scroll through the 20 options.

I have no clue why this is so and I cant figure out a way to solve it too. It works perfectly on web but it doesnt work on mobile device.

Kingsley Simon
  • 2,090
  • 5
  • 38
  • 84

2 Answers2

0

You are supposed to place it inside ion-content which is supposed to be inside ion-view. This should help with the scrolling.

Lakmal Caldera
  • 1,001
  • 2
  • 12
  • 25
0

This is because native scrolling of Ionic. You need to add to your <ion-content> the overflow-scroll="true"directive.

You can also globally enable or disable native scrolling with the ionicConfigProvider.

But this will lead to slower scrolling. So try to do this to a <ion-content> which is small and doesn't hast huge scrolling stuff in there.

mnewmedia
  • 485
  • 1
  • 6
  • 20