Tabbar + Modal = Bug in 1.0.0beta :(

ionic-v1
1

See screenshot, tabbar size overays model with white screen.

2

I’m not experiencing this and I do have modals in a tab view. If you don’t provide any code, we can’t help you out any further.

3

tab.html template

  <!-- Bouquets Tab -->
  <ion-tab title="TV" icon="icon ion-ios7-monitor-outline" href="#/tab/bouquets">
    <ion-nav-view name="bouquets-tab"></ion-nav-view>
  </ion-tab>

  <!-- Remote Tab -->
  <ion-tab title="Remote" icon="icon ion-ios7-calculator-outline" href="#/tab/remote">
    <ion-nav-view name="remote-tab"></ion-nav-view>
  </ion-tab>

  <!-- Timers Tab -->
  <ion-tab title="Timer" icon="icon ion-ios7-clock-outline" href="#/tab/timers">
    <ion-nav-view name="timers-tab"></ion-nav-view>
  </ion-tab>

  <!-- Movies Tab
  <ion-tab title="Movies" icon="icon ion-ios7-film-outline" href="#/tab/movies">
    <ion-nav-view name="movies-tab"></ion-nav-view>
  </ion-tab>   -->
  
  <!-- Settings Tab -->
  <ion-tab title="Settings" icon="icon ion-ios7-gear-outline" href="#/tab/settings">
    <ion-nav-view name="settings-tab"></ion-nav-view>
  </ion-tab>  


</ion-tabs>

page.html tempalte with model inside:

<ion-view title="Settings">
  <ion-content class="has-header has-tabs padding">

    <div class="list list-inset">
        <label class="item item-radio">
          <input type="radio" name="group" ng-model="profiles" value="Profile 1" ng-click="profOne()">
          <div class="item-content">
            Box 1
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" ng-model="profiles" value="Profile 2" ng-click="profTwo()">
          <div class="item-content">
            Box 2
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>
    </div>
  </ion-content>
</ion-view>

<script id="premium.html" type="text/ng-template">
  <div class="modal">
    <header class="bar bar-header bar-energized">
      <h1 class="title">Get Premium</h1>
      <button class="button button-clear button-positive" ng-click="closeModal()"><i class="icon ion-ios7-close-empty"></i></button>
    </header>
    <ion-content class="has-header has-tabs padding">
      <div class="list">

        <div class="item item-divider">
          Premium Features
        </div>

       <div class="item item-icon-left">
          <i class="icon ion-clock"></i>
          Manage / Set Recordtimers
        </div>

       <div class="item item-icon-left">
          <i class="icon ion-film-marker"></i>
          Stream Live-TV
        </div>

       <div class="item item-icon-left">
          <i class="icon ion-trash-a"></i>
          No Ads
        </div>        

       <div class="item item-icon-left">
          <i class="icon ion-heart"></i>
          Support development!
        </div> 

      </div>
        <button class="button button-energized button-block" ng-click="buyIAP()">Go Premium now!</button>
        <button class="button button-royal button-block" ng-click="restoreIAP()">Restore Purchases</button> 
        <button class="button button-assertive button-block" ng-click="closeModal()">Cancel</button>
    </ion-content>
  </div>
</script>

inside thecontroller:

  $ionicModal.fromTemplateUrl('premium.html', function(modal) {
    $scope.modal = modal;
  }, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
  });

  $scope.openModal = function(item) {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

  //Be sure to cleanup the modal
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
4

Okay the ion-content tag of the modal always gets the class: .has-tabs even if i remove this class everywhere out of my template code…

this fixes my error:

div.modal-backdrop.active ion-content.has-tabs {
	bottom: 0px;
}

why is that !? that cant be normal…

5

Good catch! If you have a modal that inherits from a controller scope, it will also inherit the above content’s has-tabs.

Can you open an issue with your picture and your fix?

6

Issue is opened on Github!