Row truncation using nested states and tabs

ionic-v1
1

Hi guys,

I’m trying to use some tabs in ionic. However, the rows show up truncated (as shown below).
I’ve been looking at this for a while and its busting my brains.

As you can see in the screenshot, the first row is cut off half way horizonally.

Screenshot

So here is my abstract state:

.state('main.tabs.my-buggy', {
    url: '/my-buggy',
    abstract: true,
    views: {
        'tab-my-buggy': {
            templateUrl: 'templates/tab-my-buggy.html',
            controller: 'MyBeeBuggyCtrl'
        }
    }
})

So here is my template tab-my-buggy.html:

indent preformatted text by 4 spaces

<ion-view>
<ion-content>

<ion-tabs>
    <ion-tab title="Watching" ui-sref="main.tabs.my-buggy.watching"> 
        <ion-nav-view name="tab-my-buggy-watching"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Bought In" ui-sref="main.tabs.my-buggy.bought-in"> 
         <ion-nav-view name="tab-my-buggy-bought-in"></ion-nav-view>
     </ion-tab>
 </ion-tabs>

 </ion-content>
</ion-view>

and here is main.tabs.my-buggy.watching:

   .state('main.tabs.my-buggy.watching', {
    url: '/tab-my-buggy-watching',

    views: {
        : {
            templateUrl: 'templates/tab-my-buggy-watching.html',
            controller: 'MyBeeBuggyWatchingCtrl'
        }
    }'tab-my-buggy-watching'
})

and here is ‘tab-my-buggy-watching’ template:

<div class="list card">
    <div class="item item-avatar">
        <img src="img/Blah.jpg" />
        <p>Blah</p>
    </div>
    <div class="item item-body">
        <img class="full-image" src="img/Blah.jpg" />
        <p>
            Blah
        </p>
    </div>
    <div class="item tabs tabs-secondary tabs-icon-left">
        <a class="tab-item" href="#" ng-click="openCommentModal()">
        <i class="icon ion-ios-chatboxes-outline"></i>
            Comment
        </a>
        <a class="tab-item" href="#" ng-click="openBuyInModal()">
        <i class="icon ion-ios-plus-empty"></i>
            Blah
        </a>
    </div>
</div>

Many thanks in advance !!!

2

you need to wrap your template in ion-view and ion-content tags. :wink: