Ionic2 Popover Changer la largeur

Question

Je veux changer la largeur de popover de seulement 1 page ..__J'ai essayé ceci:

Je ne souhaite pas utiliser ce $popover-ios-width dans les fichiers variable.scss Il modifie la largeur de toutes les pages.

Answer 1

Vous pouvez créer une classe personnalisée uniquement pour ce popover et la transmettre dans la cssClass pour ses options.

disons que vous avez ceci:

.custom-popover {
  width: 60%;
}

Dans votre création popover, il vous suffit de l'insérer en tant que cssClass dans les options.

const customPopOver = this.popover.create({ yourPopoverPage, yourData, { cssClass: 'custom-popover'}});
customPopOver.present();

J'espère que cela aide: D

Answer 2

answer de @ gabriel-barreto est totalement correct. Cependant, je suppose que cela nécessite une considération supplémentaire dans les autres versions.

Dans Ionic 3.6, la classe personnalisée est ajoutée à l'élément <ion-popover>. Afin de remplacer la règle de largeur par défaut définie dans la classe .popover-content, votre sélecteur doit être: 

.custom-popover .popover-content {
  width: 60%;
}

Answer 3

Je ne sais pas si cela vous conviendra toujours. J'ai rencontré le même problème, mais la modification de la configuration de la variable globale scss ne m'a pas aidée, car j'ai utilisé plusieurs PopoverControllers dans le projet. La seule façon pour moi de le faire est la suivante:

1. Placez le contenu ion en tant qu'élément parent et ajoutez l'attribut id
2. Obtenez les articles parents dans le conteneur principal:

ionViewDidLoad() {
    let element = document.getElementById('id')
    let parent=element.parentElement
    let parent2 = parent.parentElement //popover-content
    parent2.parentElement.style['width'] = "92px"
}