css - Ionic popover: Popover height doesn't fit to content -

i want adapt height of ionic-popover fit content. use popover show informations: contains ion-header , ion-content.

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

but popover big few text want display:

i tried set ion-popover-view height height: auto;, header-bar displayed in case. set fixed height (height: 100px;) working (as described here), want dynamic height depending on content length.

an example on codepen

the reason popover big because ionic css file defines following (among other properties):

.popover {    height: 280px; } 

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

modifying defaults pretty simple:

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

preferably, use own classes override values instead of defaults, don't mess else up. should give start. can add padding , what-not there.

working codepen