Not getting my iOS tabs display in correct format


#1

I’m new to Ionic and i’m having an issue in displaying tabs content in iOS version. It displays correctly in Android version.

This is section of app.js file

    .state('app.menu', {
      url: '/menu',
      views: {
        'mainContent' : {
          templateUrl: "templates/menu.html",
          controller: 'MenuController'
        }
      }
    })

Here is my menu.html file

<ion-view view-title="Menu">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="dish in dishes | filter:{category: filtText}" href="#/app/menu/{{dish.id}}" class="item-thumbnail-left">
        <img ng-src="{{baseURL+dish.image}}">
        <h2>{{dish.name}}
         <span style="font-size:75%">{{dish.price | currency}}</span>
        <span class="badge badge-assertive">{{dish.label}}</span></h2>
        <p>{{dish.description}}</p>
        <ion-option-button class="button-assertive icon ion-plus-circled" ng-click="addFavorite({{dish.id}})"></ion-option-button>
      </ion-item>
    </ion-list>
    <div class="tabs-striped tabs-color-royal">
       <div class="tabs">
         <li ng-class="{active:isSelected(1)}" class="tab-item">
             <a ng-click="select(1)">The Menu</a></li>
         <li ng-class="{active:isSelected(2)}" class="tab-item">
             <a ng-click="select(2)">Appetizers</a></li>
         <li ng-class="{active:isSelected(3)}" class="tab-item">
             <a ng-click="select(3)">Mains</a></li>
         <li ng-class="{active:isSelected(4)}" class="tab-item">
             <a  ng-click="select(4)">Desserts</a></li>
        </div>
      </div>
  </ion-content>
</ion-view>

Here is my controller. I think there must be something wrong in menu.html. But still, here is my controllers.js section for MenuController.

.controller('MenuController', ['$scope', 'menuFactory', 'baseURL', 'favoriteFactory', '$ionicListDelegate', function($scope, menuFactory, baseURL, favoriteFactory, $ionicListDelegate) {

            $scope.baseURL = baseURL;
            $scope.tab = 1;
            $scope.filtText = '';
            $scope.showDetails = false;
            $scope.showMenu = false;
            $scope.message = "Loading ...";

            menuFactory.getDishes().query(
                function(response) {
                    $scope.dishes = response;
                    $scope.showMenu = true;
                },
                function(response) {
                    $scope.message = "Error: "+response.status + " " + response.statusText;
                });


            $scope.isSelected = function (checkTab) {
                return ($scope.tab === checkTab);
            };

        }])

can someone please help me fix this? I tried to post it in different forums but no response.

Thank you very much for all responses.


#2

Did you look into https://github.com/driftyco/ionic-starter-tabs?
Tabs seem to be created quite a bit different here: https://github.com/driftyco/ionic-starter-tabs/blob/master/templates/tabs.html


#3

Hi Thanks for your help. I had messed up the sequence in menu.html. The tabs should be outside ion-content. I found it… Thank you for your reply.