Image on nav.push(NextPage) shows up before transition

Ionic Framework ionic-v3
1

Hi guys, I’ve got a page I’m building where I’d like the top half of the page to be static content and the bottom half to be a scrollable list. I thought I could just put a div in there and an ion-content beneath, but it isn’t working well because the div contents render prematurely when navigating to the new page.

Is there a better way?

2

Here’s a gif of what i’m seeing here:

image
transition.gif371×667 2.29 MB

Basically I’m pushing a new page onto the NavController. the new page has a template like this:

<ion-navbar *navbar swipe-back-enabled="true">
	<button menuToggle>
		<ion-icon name="menu"></ion-icon>
	</button>
	<ion-title>Zone {{zone.valve}}</ion-title>
</ion-navbar>


<div class="header-container" [ngStyle]="{'background-image': 'url(' + showcaseImage() + ')'}">
</div>

<ion-content>
	<ion-list>
		<ion-item>
			<ion-label>Name</ion-label>
			<ion-input type="text" [(ngModel)]="zone.name"></ion-input>
		</ion-item>
	</ion-list>
</ion-content>

but as you can see in the gif, the image inside the .header-container div shows up before the page does.

3

Try put your image div inside the ion-content

4

Yes, that works. But I put it outside of ion-content because I do not want it to scroll. I only want the lower part (the part in ion-content) to scroll.

Isn’t there a non-scrolling equivalent to ion-content that I can wrap the top part in? Then I could separate the two sections like I want.

5

Hi jasonwaters
just use ion-fixed

<ion-content>
    <div ion-fixed>
        <p>fixed content</p>
    </div>
   <p>scroll content</p>
</ion-content>