Popover: Toolbar within ion-header doesn't stay fixed

Ionic Framework ionic-v3
1

Hi everyone,

I have a Popover with a title and a close-button, which should stay fixed on top of the popover. To accomplish this I placed the ion-toolbar within an ion-header tag, which should make it stay fixed in its location (as stated by the docs about Toolbars). But when the content needs scrolling, the toolbar behaves like content and scrolls out of view.

The template of my popover:

<ion-header>
    <ion-toolbar dark>
        <ion-title>{{name}}</ion-title>
        <ion-buttons right>
            <button (click)="closeInfo()">
                <ion-icon name="close"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="colorsysteminfo-page" padding>
    <img *ngIf="imagePath!=''" [src]="imagePath">
    <p [innerHtml]="description"></p>
</ion-content>

Any ideas how to make the toolbar stay fixed on top of the popover?
Many thanks!

2

I would try using the position property on the toolbar. Set it equal to top. Perhaps take it out of the header tag too. I don’t know if this will work but might be worth a shot.

<ion-toolbar position="top">

3

Thank you for your suggestions. I tried it on both ways:

<ion-header>
    <ion-toolbar position="top">
...
    </ion-toolbar>
</ion-header>
<ion-content>
  ...
</ion-content>

and without ion-header tag:

<ion-toolbar position="top">
...
</ion-toolbar>
<ion-content>
  ...
</ion-content>

The toolbar always scrolls together with the content of the popover page (the same issue is with a ion-footer tag below the content).Tested with chrome and on my Android device.

4

I opened an issue #7098 for this.