Ionic popover：Popover 高度不适合内容

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>

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

我试图用 height: auto; 设置 ion-popover-view 高度，但在这种情况下只显示 header-bar。设置固定高度 (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;
    }
  }
}

Ionic popover：Popover 高度不适合内容

Ionic popover: Popover height doesn't fit to content

css

ionic-framework

ionic

popover

ionic-popover