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

Question

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 position="top">
        <ion-button (click)="close()" slot="start" icon-only fill="clear">
            <ion-icon name="arrow-round-back"></ion-icon>
        </ion-button>
        <ion-title>{{TACName}}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content >
    <ion-card  *ngIf="cardTitle" >
        <ion-card-title  class="card-title">{{cardTitle}}</ion-card-title>
    </ion-card>
    <ion-card *ngIf="cardDesc" >
        <ion-card-title  class="card-desc">{{cardDesc}}</ion-card-title>
    </ion-card>
</ion-content>

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

Answer 1

This is working as per your need. Button in ion-toolbar is not scrolling with ion-content.

<ion-header>
    <ion-toolbar position="top">
        <ion-buttons end>
            <button ion-button color="save">
                SAVE DRAFT
            </button>
        </ion-buttons>
        <ion-icon name="settings" style="float: left" routerLink="/settings"></ion-icon>
        <ion-title>
            Home
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <h3>All Category</h3>
    <li>
        <!-- {{category.categoryTitle}} -->
    </li>

    <ion-row>
        <ion-col size="4" *ngFor="let category of category_array">
            <ion-card>
                <ion-card-header>
                    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
                    <ion-card-title>Card Title</ion-card-title>
                </ion-card-header>

                <ion-card-content>
                    Keep close to Nature's heart... and break clear away, once in awhile,
                    and climb a mountain or spend a week in the woods. Wash your spirit clean.
                </ion-card-content>
            </ion-card>
        </ion-col>
    </ion-row>
</ion-content>

Answer 2

Not the best solution but might apply for your case. Replace ion-header, ion-content and ion-footer with div and set overflow-y : scroll; to your content div to make it scrollable. See @davidkonrad's demo for more info How to add a footer to popover and make content scrollable? Using Twitter bootstrap 3