Add ion-slide-box inside popup


#1

Hi,

I’m trying to add an ion-slide-box inside a popup.
Here’s my code:

<ion-header-bar>
    <button ng-click="prev()" class="button button-clear button-left" ng-if="currentSlide>0">
        <i class="icon ion-chevron-left"></i>
    </button>
    {{currentSlide}}
    <h1 class="title">Modal Test</h1>
</ion-header-bar>

<ion-scroll class="modal-content">
    <ion-slide-box delegate-handle="modalSlider" show-pager="false" disable-scroll="true">
        <ion-slide>
            <ion-list class="list">
                <li class="item item-toggle" ng-repeat="i in items">
                    {{i.Name}}
                    <label class="toggle toggle-primary">
                        <input type="checkbox">

                        <div class="track">
                            <div class="handle"></div>
                        </div>
                    </label>
                </li>
            </ion-list>
        </ion-slide>
        <ion-slide>
           test second slide
        </ion-slide>
        <ion-slide>
test third value
        </ion-slide>
    </ion-slide-box>
</ion-scroll>

<ion-footer-bar>
    <button class="button button-outline button-positive" ng-click="close()">Close</button>
    <button class="button button-outline button-positive" ng-click="next()" ng-show="currentSlide < 2">Next</button>
    <button class="button button-outline button-positive" ng-click="confirm()" ng-show="currentSlide== 2">Confirm</button>
</ion-footer-bar>

As it is above, the popup is displayed but body has no height and it is very small, as you can see here: http://codepen.io/NickHG/pen/NNygjv

If I change ion-content with ion-scroll, the popup height is bigger, but still not expanding to show all the elements, plus the footer is overlapping the last element.

How can I add ion-slide-box inside a popup’s ion-content?
is it even possible?

Thanks