Text flows outside of reorder-enabled List inside Modal View


#1

Hi, I want to have a list with reordering enabled inside a Modal view. It should look neat but somehow the text got out of the screen when I add class "item-text-wrap to the item.

Any suggestions please?

Here is my HTML code:

  <ion-modal-view>
    <ion-header-bar class="bar bar-stable">
	    <button class="button" ng-click="quiz4.closeModal()">
	      	Back
	    </button>
	      <h1 class="title">Quiz 4</h1>
    </ion-header-bar>
    <ion-content class="padding">
	    <ion-list show-reorder="true">
		  <ion-item ng-repeat="option in quiz4.options" class="item item-text-wrap">
		    {{option}}
		    <ion-reorder-button class="ion-navicon"
		                        on-reorder="quiz4.moveItem(option, $fromIndex, $toIndex)">
		    </ion-reorder-button>
		  </ion-item>
		</ion-list>
    </ion-content>
  </ion-modal-view>