web-dev-qa-db-fra.com

Popover ionique: la hauteur du popover ne convient pas au contenu

Je veux adapter la hauteur d'un ionic-popover à son contenu. J'utilise cette popover pour afficher certaines informations: elles ne contiennent 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 le popover est trop gros pour le texte que je veux afficher:

Ionic popover: too many blank

J'ai essayé de définir la hauteur de la vue ion-popover-view avec height: auto;, mais seule la barre d'en-tête est affichée dans ce cas. Définir une hauteur fixe (height: 100px;) fonctionne (comme décrit ici ), mais je souhaite une hauteur dynamique en fonction de la longueur du contenu.

Un exemple sur CodePen

cssionic-frameworkionicpopoverionic-popover
11
Getz

Si le popover est si gros, c'est parce que le fichier CSS ionique définit les propriétés suivantes (parmi d'autres propriétés):

.popover {
   height: 280px;
}

Ceci, combiné au fait que <ion-header-bar> et <ion-content> sont des éléments parfaitement positionnés, signifie que si vous voulez avoir votre propre hauteur dynamique, vous devrez probablement pirater les styles par défaut de ces éléments, ou vous pouvez concevoir votre propre popover à partir de zéro. .

La modification des valeurs par défaut est assez simple:

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

Utilisez de préférence vos propres classes pour remplacer les valeurs au lieu des valeurs par défaut, afin de ne rien gâcher. Mais cela devrait vous donner un bon départ. Vous pouvez ajouter un rembourrage et ce qui ne l'est pas à partir de là.

CodePen de travail

27
JoeLinux

En plus de la réponse précédente, envisagez d'utiliser le style suivant

.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;
    }
  }
}
0
Víctor Hugo