Unable to get tabs inside a ion-tab content (Nested Tabs)

[vamshi4001]

Hi,

I am trying to have nested tabs, like 'Explore' and 'Purchase' as top level tabs and 3 names 'ionic','material','design' as 3 tabs inside 'Purchase' tab. But I am unable to get the tabs properly rendered - They are going behind the top level tabs or coming below leaving some margin. Tried fixing by removing classes or changing css, but felt that it should have been handled in a better way by you guys. So inner tabs 'ionic','material','design' are not seen and the content inside these 3 tabs is not visible at all

following is code `

<ion-tabs class="tabs-top tabs-light">
    <ion-tab title="Explore">
        <ion-content class="has-header has-tabs-top">
            <div class="card card--expand" ng-click="showDetails(123)">
                somecontent
            </div>
            <div class="card card--expand">
                somecontent       
            </div>
            <div class="card card--expand">
                somecontent        
            </div>
            <div class="card card--expand">
                somecontent         
            </div>
            <div class="card card--expand">
                somecontent         
            </div>
        </ion-content>
    </ion-tab>
    <ion-tab title="Purchase">
        <ion-content class="has-header has-tabs-top">
            <ion-tabs class="tabs-light">
                <ion-tab title="Ionic">
                    <ion-content>
                        <h1>Ionic</h1>
                    </ion-content>
                </ion-tab>
                <ion-tab title="Material">
                    <ion-content>
                        <h1>Material</h1>
                    </ion-content>
                </ion-tab>
                <ion-tab title="Design">
                    <ion-content>
                        <h1>Design</h1>
                    </ion-content>
                </ion-tab>
            </ion-tabs>                        
        </ion-content>
    </ion-tab>
</ion-tabs>

` As you can see, 'Purchase' tab is selected and you can also see a black border below 'Explore' - which is the first nested tab selected - but hidden inside. Also, we can't see the content of nested tabs.

[jjaybrown]

@vamshi4001 Is nested tabs supported by Ionic?