Ionic 弹出框：弹出框高度不适应内容

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的高度，但是在这种情况下只显示标题栏。 设置一个固定高度（height: 100px;）可以工作（如此处所述），但我希望根据内容长度动态调整高度。 CodePen上的示例

- Getz

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

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

工作的CodePen

- JoeLinux

---

谢谢。我尝试了一个等效的解决方案，但是这导致了一个我不太理解的填充问题。只有第一行被填充：http://i.imgur.com/aBUeotJ.png - Getz

文本是<ion-content>元素的直接子元素，因此它共享所有那些用于<ion-content>的样式属性。最佳实践是将文本包装在另一个元素（例如<div>）中，并根据您的需求为该元素设置样式。这是一个CodePen示例：http://codepen.io/anon/pen/JdBNaG - JoeLinux

我在Ionic论坛上找到了一个类似的解决方案，用于动态垂直调整$ionicPopover的大小（https://forum.ionicframework.com/t/popover-sizing/8251/16）。这个解决方案更进一步，可能对其他人也有用。 - filoxo

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

- Víctor Hugo