css – 离子popover：Popover高度不符合内容

我想调整一个 ionic-popover的高度来适应他的内容.我使用这个popover来显示一些信息：它们只包含一个离子头和一个离子含量.

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

但是,对于我想显示的几个文本,popover是太大了：

我试图设置离子投影视图高度,其高度为：auto;但是在这种情况下只显示标题栏.设置一个固定的高度(高度：100px;)正在工作(如here所述),但我想要一个动态高度,取决于内容长度.

An example on CodePen

解决方法

popover这么大的原因是因为Ionic CSS文件定义了以下(以及其他属性)：

.popover {
   height: 280px;
}

那结合了< ion-header-bar>和<离子含量>绝对定位的元素意味着,如果您想要自己的动态高度,您可能不得不破坏这些元素的默认样式,或者您可以从头设计自己的popover.

修改默认值很简单：

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

最好使用你自己的类覆盖值而不是默认值,所以你不要混乱任何东西.但这应该给你一个好的开始.你可以添加填充和什么不在那里.

Working CodePen