Ionic2 Popover Change Width

user_4592546 0
Viewed 10293

I want to change the popover width of only 1 page. I tried this:

I do not want to use this $popover-ios-width in variable.scss files since it changes the width on all pages.

ionic2 ionic-framework
6 Answers

Add this below code in variables.scss. works for me in Ionic 4.

ion-popover {
  .popover-wrapper {
   .popover-content {
     width: fit-content;
     max-width: 300px;
   }
  }
}
user_105226330

Try this...

myPopOver = this.popovercontroller.create({ component: MyCustomComponent, 
               event:ev, 
               cssClass: 'my-custom-popover'
})
    
myPopOver.present();

add my-custom-popover class in global.css file.

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

You need to create popover and add cssClass prop as on code above, then you can use 'custom-popover' class in variables.scss file like below.

.custom-popover {
.popover-wrapper {
  .popover-content {
    width: 465px;
  }
}

}

user_135901880
Related