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

Question

我想调整ionic-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;设置ion-popover-view高度，但在这种情况下只显示标题栏。设置固定高度（height: 100px;）正在工作（如here所述），但我想要一个动态高度，具体取决于内容长度。

An example on CodePen

Answer 1

弹出窗口太大的原因是因为Ionic CSS文件定义了以下（以及其他属性）：

.popover {
   height: 280px;
}

结合<ion-header-bar>和<ion-content>绝对定位元素的事实意味着如果你想要自己的动态高度，你可能不得不破解默认样式这些元素，或者您可以从头开始设计自己的弹出窗口。

修改默认值非常简单：

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

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

Working CodePen

Answer 2

除了之前的回答，请考虑使用以下风格

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