IONIC Popup Dialog: Buttons at Wrong Position If The Template HTML Contains Tag

Question

I would like to make an IONIC popup dialog that consists of popup header, popup body and popup button sections. The content of the popup body is a ion-list.

Here is the desired outcome:

I achieved the desired outcome by using the template HTML as listed below:

  <div class="padding">
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-left" ng-repeat="bowler in allBowlers() track by bowler.timestamp"
      type="item-text-wrap" ng-click="onSelectBowler(bowler)">
        <i class="icon ion-chevron-left icon-accessory"></i>
        <h3>Name: {{bowler.name}} </h3>
        <span>Hand: {{bowler.hand}}</span>
        <ion-option-button class="button-assertive" ng-click="onRemoveBowler(bowler)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </div>

However, there is a problem with the template HTML code above. The problem is that when I swipe on a list item (for example, to show the 'delete' button on each item), there will be an error printed on console and it read as: "Uncaught TypeError: Cannot read property 'freeze' of null".

I did some research on internet and found a solution at: a proposed solution to the 'freeze reference on null' problem by 'mhartington'. As suggested, I wrapped my template HTML code in ion-content tag. Here is the updated code:

<ion-content>
  <div class="padding">
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-left" ng-repeat="bowler in allBowlers() track by bowler.timestamp"
      type="item-text-wrap" ng-click="onSelectBowler(bowler)">
        <i class="icon ion-chevron-left icon-accessory"></i>
        <h3>Name: {{bowler.name}} </h3>
        <span>Hand: {{bowler.hand}}</span>
        <ion-option-button class="button-assertive" ng-click="onRemoveBowler(bowler)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

The only difference between the two versions above is the ion-content tag.

The ion-content thing did solve the 'freeze reference on null' problem and there is no more error message printed on console when I swipe on list items. However, there is a new problem appears (which I cannot find any solution): the position of the popup button seems to be incorrect.

As shown in the picture below, after I wrapped template HTML in a pair of ion-content tag, it seems to me that the popup body (which contains the ion-list) doesn't have a height anymore, which is evidenced by that the popup button (the 'Cancel' button) is positioned just under the popup header section.

Here is a screen capture image to show what I meant:

So, here comes to my question: what is the best way to do what I want to do here?

1) If I don't use the ion-content in the template HTML, how do I avoid the 'freeze reference on null' problem?

2) If I have to wrap my HTML template in a ion-content tag, then how do I position the popup button correctly?

Many thank!

Best regards,

Chris

P.S.

Here is my CSS that change the dimension of the popup window:

.popup {
  width: 80% !important;
  height: 60%;
}

Here is the code I used to show the popup dialog in a controller:

  $scope.selectBowler = function () {
    $ionicPopup.show({
      templateUrl: 'templates/popup-bowlers.html',
      title: 'Bowlers',
      scope: $scope,
      buttons: [
        {
          text: 'Cancel',
          type: 'button',
          onTap: function (e) {
            // empty function.
          }
        }
      ],
    });
  };