[Ionic v4] Popover viewport center positioning

Ionic Info @ionic/angular: “4.0.0-beta.1”

Level Nice to have I think but I could live without the following feature request too 😉

Describe the Feature Request When no event is provided, the Popover will be positioned in the center of the viewport. To achieve this, the element div.popover-content will be created/set with top and left attributes

With this feature request I would suggest not to “position” the Popover in the center of the viewport but to “justify” it in the in the center of the viewport

To achieve this I overwrite the following css

ion-popover {
  div.popover-content {
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
}

Proposal solution a. I think it would maybe make more sense per default when no event are provided to have the popover and its content justified in the center in the viewport and not positioned

b. If you don’t think that’s a good idea, could at least the top and left attributes not being added to the element itself but to a style property in oder to let us redefined these without having to use the keyword !important

Screenshot

[brandyscarney]

@alphagamer7 That is a different issue than the one reported. It’s hard to help without seeing any code but it looks like you have a custom select. I would make sure that the select has position: relative applied to it. If you believe this is an issue with Ionic and not custom code, please create a new issue with steps to easily reproduce. Thank you!

[igarciadev]

Thank you @somq

@hemangshah Honestly I’m not really sure the solution I chose because it was quite some time ago, but I think I directly modified the style using the popover object.

const popover = await this.popoverController.create({ ... })
popover.style.cssText = '--width: 73vw;'

Hope this helps!

Thank you @somq , this works for me!