Ionic popover: Popover height doesn't fit to content

Question

I want to adapt the height of a ionic-popover to fit his content. I use this popover to show some informations: they just contains a ion-header and a ion-content.

<ion-popover-view>
    <ion-header-bar>
        <h1 class="title">Title</h1>
    </ion-header-bar>
    <ion-content scroll="false" class="padding">
        I want the parent's height to fit the content's height
    </ion-content>
</ion-popover-view>

But the popover is too big for the few text I want to display:

I tried to set the ion-popover-view height with height: auto;, but just the header-bar is displayed in this case. Set a fixed height (height: 100px;) is working (as described here), but I want a dynamic height depending on the content length.

An example on CodePen

Answer 1

The reason the popover is so big is because the Ionic CSS file defines the following (among other properties):

.popover {
   height: 280px;
}

That, combined with the fact that both <ion-header-bar> and <ion-content> are absolutely positioned elements means that if you want your own dynamic heights you're probably going to have to either hack the default styles of these elements, or you can design your own popover from scratch.

Modifying the defaults is pretty simple:

.popover {
    height: auto !important;
}
.popover ion-header-bar {
    position: relative;
}
.popover ion-content {
    top: 0;
    position: relative;
}

Preferably, use your own classes to override the values instead of the defaults, so you don't mess anything else up. But this should give you a good start. You can add padding and what-not from there.

Working CodePen