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

Question

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

但是对于我想显示的几个文本来说，弹出框太大了：

我尝试使用 设置 ion-popover-view 高度height: auto;，但在这种情况下只显示标题栏。设置固定高度 ( height: 100px;) 正在工作（如此处所述），但我想要一个取决于内容长度的动态高度。

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

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

工作代码笔

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