Ionic-framework: Ionic 2 Popover: Toolbar within ion-header or ion-footer doesn't stay fixed

[szerner]

In a scrollable Popover (content size is larger than the window of the popover), a <ion-toolbar> within <ion-header> or <ion-footer> scrolls together with the content.

The toolbar should stay fixed on its relative position (top resp. bottom).

Popover template (with title and button to close):

<ion-header>
    <ion-toolbar>
        <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>
    <p [innerHtml]="description"></p>
</ion-content>

Tested with Ionic 2 beta.10 on Android and Chrome browser.

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS:
Node Version: v5.11.1

[jgw96]

Thanks for opening an issue with us! We are already aware of this issue and will be looking into it. Note to self - probably related to this issue: https://github.com/driftyco/ionic/issues/7084

[BradyLiles]

Is there any update on this? Seems to still be an issue in RC1

[jbagaresgaray]

Any update for this bug??

[szerner]

Meanwhile I tried to switch from Popups to Modals, but then I lose the ability to style them individually...

[paragw09ckp]

Looks like it has not been fixed yet. Any idea if is in the plans?

[siphiwe]

Bump.

[sarahtully]

For now I fixed this issue using ion-scroll: <ion-content><ion-scroll scrollY="true">...</ion-scroll></ion-content> and then using scss: ion-scroll { height: calc(100vh - 68px)} In our case .popover-content has a height: 100%; max-height: calc(100% - 12px). So to get the available scroll height it's 100vh - 68px (68px = 56px (ion-header height) + 12px (amount subtracted from the .popover-content height)); Hope this helps some of you resolve this issue while the Ionic team works on a resolution.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/102