Ионный popover: высота Popover не подходит для контента

Я хочу адаптировать высоту ionic-popover, чтобы соответствовать его контенту. Я использую этот 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 height to fit the content height
    </ion-content>
</ion-popover-view>

Но popover слишком большой для небольшого текста, который я хочу отобразить:

Я попытался установить высоту высоты иона с помощью height: auto;, но в этом случае будет отображаться только панель заголовка. Установка фиксированной высоты (height: 100px;) работает (как описано здесь), но я хочу динамическую высоту в зависимости от длины содержимого.

Пример в CodePen

Ответ 1

Причина, по которой popover настолько велик, заключается в том, что файл 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;
}

Предпочтительно использовать свои собственные классы для переопределения значений вместо значений по умолчанию, поэтому вы не испортите ничего. Но это должно дать вам хорошее начало. Вы можете добавить отступы и что-то не там.

Рабочий кодPen

Ответ 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;
    }
  }
}