Ionic-framework: [Ionic v4] Popover viewport center positioning

[peterpeterparker]

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

[prithvihv]

hey could i look into this ?

[jhkirkley]

In progress..

[bowenliang123]

still got the same problem while using 4.0beta17

[alphagamer7]

Got same issue for ion -select interface popover when clicking on the pop over it gets shown elsewhere, any idea on how to fix this ?

[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!

[aida29]

Hi, Can i get the code?

[florianmaxim]

@brandyscarney Why has this never been implemented? What were the arguments against this proposal? Still running into this in 2020...

[brandyscarney]

@florianmaxim There haven't been any arguments. The issue is labeled as a feature request & help wanted, meaning it's something that can be added but our team hasn't had the bandwidth to look into it. We are happy to take a look at a pull request if anyone wants to work on adding this. I can re-add the help wanted label which will add a comment on how to contribute. 🙂

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[somq]

Absolute positioning also result in false positioning in some cases.

I experienced a popover being placed down to the view only at first app open (a refresh would place it properly).
I guess this is due to the dynamic calculation of top property.