Ion-content inside component

Ionic Framework ionic-v3
1

Hello,

I have the following usecase. I have a view where I swipe to change both the header and the content.

My swiper is encapsulated in its own component so the view look like this…

<lazy-slides [dataProvider]=“dataProvider”>

<ng-template let-sucheingabe="input" let-view="data">

    <ion-header ...></ion-header>

    <ion-content>
...

Both header and content are defined not as top level elements of the view but as elements inside the element. The usual styling completley breaks. For instance the was initially not visible until I said

.slide-zoom { height: 100%;}

After that the was hidden behind the until I introduced an explicit position:

.ios {
  lazy-slides {
    ion-content {
        top: $navbar-ios-height;
    }
  }
}

Now the header still overlaps the native status bar.

Why does ion-content ignore its usual styling rules and how can I restore that behaviour without my own explicit and pla tform dependent styling?

Thanks

2

I don’t think this is doable inside an embedded component. I believe <ion-content> must be a top-level child of a page.

3

I’m afraid I’ll answer same as @rapropos. But maybe if you have an app level-component definition, that can preload a number of dynamic images, it could do the trick. (After all, slides as tutorial do exactly that).

See joshmorony’s take on that:

hope it helps,

4

I have observed, that the following styles seem to work on android:

.slide-zoom {
    height: 100%;
    text-align: left;
}
.swiper-slide {
    font-size: inherit;
}
ion-header {
    position: relative;
    display: block;
}
ion-content {
    position: relative;
    display: block;
}

On iOS the header still hides behind the status bar and there are minor flaws when navigation back to the page and where there is white space visible initially on top.

My “solution” is inspired by a calendar app that I ve seen on an android 7 device where the header of the page itself which also shows information that changes when sliding is not part of the sliding but rather changes after the sliding takes place.

So in the end I moved my slider into the content area.