What is the best way to show popover/modal content

Ionic Framework
1

Hi,

I don’t know how to say that, i think my picture is more relevant…

Before Ionic 6, i’m using Popover content to build that. With Ionic 6, popover content is more complicated and modify the width and the position of popover on the screen is so hard.

I’m confusing, can i do this with modal? so it’s possible to center modal with a max-height?

RPReplay_Final1637407799_MP4_SparkVideo

Thanks for answer :slight_smile:

2

What do you mean by before ionic6? Which version of the ui framework are u using?

3

Are you talking about making the modal not take up the entire screen? If so, you can use the --height CSS Variable on ion-modal:

ion-modal {
  --height: 80%;
}

See ion-modal: Ionic Mobile App Custom Modal API Component

4

If you want to customize popover content you can do by css like below;

ion-popover::part(content) {
  width: 300px !important;
  top: calc(250px + var(--offset-y, 0px));
  left: calc(50px + var(--offset-x, 0px));
}