[SOLVED][BUG?] Collection-repeat inside ion-tabs inside modal

ionic-v1
1

Hi,

We are having a problem while trying to show a list with collection-repeat inside a tab which is inside a modal with a sub-header. The collection repeat is not aware of the presence of the headers and the tabs and it is not showing the last elemnts.

Here you have a codepen showing the problem. There are two tabs inside the modal, the first tab shows the entire list and the second tab shows only selected items.

How can I make the collection-repeat show all the items correctly? I’ve tried using css but I haven’t managed to solve the problem.

Thanks in advance

2

I have found a solution to this problem but I wonder if this could be considered a bug because I had to override ionic css code to make it work.

The only conbination I’ve found to work is this one.

The ion-content inside each tab must include these classes:

<ion-tabs>
    <ion-tab>
        <ion-content class="has-header has-subheader has-tabs has-tabs-top">
        ...
        </ion-content>
    </ion-tab>
    ...
</ion-tabs>

And ionic css must be overwritten with:

.tabs-top > .tabs{
    top: 88px !important;
}

.has-tabs.pane{
    bottom: 0 !important; 
}
3

Normally each tab has its own view, defined on the ui-router, but because you’re in a modal you can’t define a view on the ui-router(it’s a known limitation), so you have to define it inline, like this:

<ion-tabs>
    <ion-tab>
        <ion-view>
            <ion-content>
            ...
            </ion-content>
        </ion-view>
    </ion-tab>
    ...
</ion-tabs>

Reference: How to create several tab on pop-up/modal?
Pen: http://codepen.io/nuba/pen/EjEjEm