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:

Ionic popover: too many blank

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

JoeLinux · Accepted Answer · 2015-07-17 13:04:15Z

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

Thanks. I've tried an equivalent solution, but that leads to a padding issue I don't really understand. Only the first line is padded: i.imgur.com/aBUeotJ.png
The text is a direct child of the <ion-content> element, so it shares all those style properties that are meant for <ion-content>. Best practice would be to wrap the text in another element (such as a <div>) and style that element according to your needs. Here's a CodePen: codepen.io/anon/pen/JdBNaG
I found a similar solution on the Ionic Forums for dynamic vertical sizing of the $ionicPopover, which went a step farther and might be useful for others as well.

Víctor Hugo · Accepted Answer · 2017-01-03 02:19:04Z

In addition to previous answer, consider using following style as well

.platform-ios { .popover-arrow { right: 0px; } div.list { a.item:first-child{ border-top-left-radius: 10px; border-top-right-radius: 10px; } a.item:last-child{ border-bottom-left-radius: 10px; border-bottom-right-radius:10px; } } }

Collectives™ on Stack Overflow

Ionic popover: Popover height doesn't fit to content

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related