Popover ionique: la hauteur de Popover ne correspond pas au contenu

Je veux adapter la hauteur d'un ionique-liste pour s'adapter à son contenu. J'utilise cette liste pour afficher des informations: ils ne contient qu'un ion-header et un 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>

Mais la liste est trop grande pour le peu de texte que je veux afficher:

Popover ionique: la hauteur de Popover ne correspond pas au contenu

J'ai tenté de l'ion-liste-affichage de la hauteur avec height: auto;mais juste la tête de la barre est affichée dans ce cas. Définir une hauteur fixe (height: 100px;) travaille (comme décrit ici), mais je veux une dynamique de la hauteur en fonction de la longueur du contenu.

Un exemple sur CodePen

source d'informationauteur Getz

  1. 26

    La raison pour laquelle la liste est tellement grande est parce que l'Ionique fichier CSS définit les éléments suivants (parmi d'autres propriétés):

    .popover {
   height: 280px;
}

    Ce qui, combiné avec le fait que les deux <ion-header-bar> et <ion-content> sont des éléments en position absolue signifie que si vous voulez votre propre dynamique heights vous allez probablement avoir à soit hack les styles par défaut de ces éléments, ou vous pouvez concevoir votre propre liste à partir de zéro.

    Modifier les paramètres par défaut est assez simple:

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

    De préférence, utilisez vos propres classes pour remplacer les valeurs à la place des valeurs par défaut, de sorte que vous ne jouez pas autre chose. Mais cela devrait vous donner un bon départ. Vous pouvez ajouter rembourrage et ce-pas.

    Travail CodePen

  2. 0

    En plus de la réponse précédente, pensez à utiliser suivant le style ainsi

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