Ionic-framework: The Ionic slidebox requires explicit CSS to show Ionic content

[dtangster]

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%?

[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.

[dtangster]

I've tried using <ion-scroll> just now, but it doesn't let me scroll. In fact, it crashes my Android device when I change the orientation when viewing the slide-box. Everything works fine when I use <ion-content>

[perrygovier]

Can you describe what the end result is supposed to be? I think there's probably a better approach we can take.

[dtangster]

I just need to have a slidebox containing multiple slides with each one containing a news article. Each slide simply has an image at the top and HTML injected below the image. I just need to be able to swipe to change slides AND scroll down on the same slide if the article is too long to read on one page.

[perrygovier]

Hey @dtangster we've heavily refactored slidebox, could you try it again with <ion-scroll>`?

[dtangster]

Hi there. I just tried again with , but the same issue exists with beta#10. I can't scroll.

[attilavago]

Same issue here. I'm really frustrated by how simple things like scrolling inside a slide-box can cause such amount of pain.

[syarifuddinahmads]

hey there. am using ionic one, and am have a problem in slidebox,

am load img from controller but img not load to firstime open or run app,
need to resize and round rotation to showing slidebox,

how to fix guys...

[sertunc]

@perrygovier when i put everthing is ok. you save my life =) thank you

[newuser44]

Did this start working? Any example of how to get a modal with the slide in it?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.