Row truncation using nested states and tabs

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.


So here is my abstract state:

.state('', {
    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-tab title="Watching" ui-sref=""> 
        <ion-nav-view name="tab-my-buggy-watching"></ion-nav-view>

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


and here is

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

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

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

<div class="list card">
    <div class="item item-avatar">
        <img src="img/Blah.jpg" />
    <div class="item item-body">
        <img class="full-image" src="img/Blah.jpg" />
    <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>
        <a class="tab-item" href="#" ng-click="openBuyInModal()">
        <i class="icon ion-ios-plus-empty"></i>

Many thanks in advance !!!

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