I wanted to use an ion-popover to show some messages. However when the popover was presented, the popover-content class would set “top” to calc(368px + var(somestuff)).
This makes my popover show the component from the center of the page instead of the top:
But this is what I want:
How did popover get the 368px and am I able to override this?
I think ion-modal will work better here. That component is designed to overlay your content while taking up the entire screen. Popover on the other hand is only designed to take up a small portion of the screen.
Hi Liam,
The reason why I’d wanted to use modal, was because of the appearance (small view with a clickable backdrop). My modals will always use the maximum amount of space available.
Apparently I can only get the popover appearance when I use a padding.
Is it possible to have the modal just use the space needed for its children?
We do not have a property that does this automatically, but you can use the --height and --width CSS variables to resize the modal to have it not take up the full screen. You can also request a feature on our GitHub repo if you want to see this feature added to the modal.