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

score 28 · Accepted Answer · answered Jul 17 '15 at 13:04

28

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

answered Jul 17 '15 at 13:04

JoeLinux

4,198
1
29
31

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: http://i.imgur.com/aBUeotJ.png – Getz Jul 17 '15 at 13:07
2

The text is a direct child of the `` element, so it shares all those style properties that are meant for ``. Best practice would be to wrap the text in another element (such as a `
`) and style that element according to your needs. Here's a CodePen: http://codepen.io/anon/pen/JdBNaG
– JoeLinux Jul 17 '15 at 13:14
I found a similar solution on the Ionic Forums for [dynamic vertical sizing of the `$ionicPopover`](https://forum.ionicframework.com/t/popover-sizing/8251/16), which went a step farther and might be useful for others as well. – filoxo Feb 15 '16 at 23:12

score 0 · Answer 2 · answered Jan 03 '17 at 02:19

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;
    }
  }
}

Ionic popover: Popover height doesn't fit to content

2 Answers2