The Ionic slidebox requires explicit CSS to show Ionic content

For instance, the html below will not display any slides even when all variables used contain data. It works if I remove the <ion-content> tag, but then I would not be able to scroll if the content is more than the screen height.

<ion-view title="Title">
    <ion-slide-box show-pager="false">
        <ion-slide ng-repeat="article in filteredArticles">
            <ion-content class="has-header">
            <img ng-src="{{ article.imageURL }}" ng-style="{ 'width': '100%' }" />
            <div ng-bind-html="article.html"></div>
            </ion-content>
        </ion-slide>
    </ion-slide-box>
</ion-view>

If I want to keep the <ion-content> tag, I must have explicit CSS like so:

.slider {
    height: 100%;
}

Is there a reason why the .slider class doesn’t have a default height of 100%?

[sertunc]

@perrygovier when i put <ion-content> everthing is ok. you save my life =) thank you

[perrygovier]

Hey @dtangster, <ion-content> isn’t meant to be used inside an <ion-slide-box>. You probably want to use something like <ion-scroll> for similar behavior.