离子弹出:弹出高度不适合内容

Question

我想调整离子弹出的高度以适应他的内容.我使用这个popover来显示一些信息:它们只包含一个ion-header和一个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>

但是popover对于我想要显示的少数文本来说太大了:

我尝试设置离子弹出视图高度height: auto;,但在这种情况下只显示标题栏.设置一个固定高度(height: 100px;)工作(如描述在这里),但我想这取决于内容长度的动态高度.

关于CodePen的一个例子

Answer 1

弹出窗口如此之大的原因是因为Ionic CSS文件定义了以下(以及其他属性):

.popover {
   height: 280px;
}

结合这两个<ion-header-bar>并且<ion-content>绝对定位元素的事实意味着如果你想要你自己的动态高度,你可能不得不破解这些元素的默认样式,或者你可以从头开始设计你自己的popover.

修改默认值非常简单:

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

最好使用您自己的类来覆盖值而不是默认值,这样您就不会弄乱任何其他内容.但这应该会给你一个良好的开端.你可以从那里添加填充和什么.

工作CodePen