bug: popover does not adjust position when trigger is at edge of screen

[Saqib92]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

Using ion-datetime going outside of the page and not showing completely, I have also tried side="top" attribute on popover but no change in position.

Expected Behavior

should show complete Calendar regardless of the position.

Steps to Reproduce

Use Latest ionic Version Code:

<ion-item button="true" id="open-date-input2">
                  <ion-label>Date Of Birth</ion-label>
                  <ion-text slot="end">{{ dateOfBirth }}</ion-text>
                  <ion-popover trigger="open-date-input2" show-backdrop="true" side="top" alignment="end" backdrop-dismiss="true">
                    <ng-template>
                      <ion-datetime
                        #dobDatetime
                        presentation="date"
                        (ionChange)="dateOfBirth = formatDate(dobDatetime.value)"
                      ></ion-datetime>
                    </ng-template>
                  </ion-popover>
                </ion-item>

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (C:\Users\IDEA\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.0.5
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.0
   @capacitor/android : not installed
   @capacitor/core    : 3.4.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.3
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 8.3.2
   OS     : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you provide a GitHub repo I can use to verify this behavior?

[Saqib92]

Thanks for the issue. Can you provide a GitHub repo I can use to verify this behavior? Here is the git repo. Check Last Ion-item for ion-datetime popover.

https://github.com/Saqib92/iondatetime-issue

[sapabg]

I am having the same issue - ion-datetime is outside the screen. Ionic 5.36, ionic/angular 6.0.8-dev.1644430127.1b9bb92 (because of the bug that broke FormControls with email and number types, if it matters).

[Saqib92]

I used Modal to show datetime calendar to overcome this issue for now. check this Video skip to 13 Minutes: https://www.youtube.com/watch?v=iq_XIPml9_M

[sapabg]

I used Modal to show datetime calendar to overcome this issue for now. check this Video skip to 13 Minutes: https://www.youtube.com/watch?v=iq_XIPml9_M

Thanks! I really prefer the popover tho. This looks terrible on desktop and it's always in the middle.

[Saqib92]

I used Modal to show datetime calendar to overcome this issue for now. check this Video skip to 13 Minutes: https://www.youtube.com/watch?v=iq_XIPml9_M

Thanks! I really prefer the popover tho. This looks terrible on desktop and it's always in the middle.

Had to go through same pain. you can use Other Calendar plugin. Like: https://www.npmjs.com/package/ion2-calendar

[sapabg]

I used Modal to show datetime calendar to overcome this issue for now. check this Video skip to 13 Minutes: https://www.youtube.com/watch?v=iq_XIPml9_M

Thanks! I really prefer the popover tho. This looks terrible on desktop and it's always in the middle.

Had to go through same pain. you can use Other Calendar plugin. Like: https://www.npmjs.com/package/ion2-calendar

Let's hope it will get fixed sooner rather than later. The way it's going I might ditch Ionic altogether since I am already not using half the components because of small things like this. The benefits are not that much anymore and there is a new quirk with every update...it is starting to get in my way rather than help me :(

[Pijuli]

Same issue for me...

[liamdebeasi]

This can also be reproduced without datetime: https://github.com/ionic-team/ionic-framework/issues/24870

[muuvmuuv]

The same happens for me if I adjust the width with percentage or viewport properties:

ion-popover {
  --width: 400px;
  --max-width: 92vw;
}

[MaximSedov]

Hi! Is there still no solution at the moment? I also ran into this, and ion-popover has the same problem.

[XueMeijing]

Hi~ I come across the same problem, any updates?

[Saqib92]

Hi~ I come across the same problem, any updates?

No Update till now.

[MaximSedov]

any updates?

[Saqib92]

any updates?

Not yet.

[Lineaum]

Hi, any news on this issue ?

[albiorixvimal]

any update on this?

[distante]

Still no updates 😢

[lincolnthree]

If the popover is triggered by an ion-input, this has the additional issue of causing the entire page to shift when scroll-assist or input-assist or whatever it's called kicks in:

https://user-images.githubusercontent.com/362329/206742953-66944fbd-ca29-4622-8275-435950b69b9f.mov

[Saqib92]

Still happening in "@ionic/angular": "^6.4.1".

First Time it is getting rendered outside of screen, but after that is is opening correctly. Secondly: side attribute is not working.

Stackblitz

Click on Footer ellipsis Icon.

[Saqib92]

Still happening in "@ionic/angular": "^6.4.1".

First Time it is getting rendered outside of screen, but after that is is opening correctly. Secondly: side attribute is not working.

Stackblitz

Click on Footer ellipsis Icon.

If you have fix height of your popover then use --offset-y will fix the position.

e.g:

.options-popover {
  --offset-y: 0px !important;
  --height: 200px;
}

[moose4lord]

I ran into this issue while using ion-select with interface="popover". If the popover trigger was too close to the bottom of the page, the popover would be very small with only one or two options. It seems to me that if the popover trigger is above the middle of the page, it should pop down, and if the trigger is below the middle of the page, it should pop up. But that's not the case.

Saqib92's fix worked for me. Thanks!

Also, I agree the 'side' attribute needs a little work. If set to anything except 'bottom", the popover scroll does not work properly when the list of options is long.

[ReneZeidler]

This issue still persists on the latest version, 7.1.1.

I tracked down the issue. It was introduced with 7.0.6 with #27344. More specifically, the commit introduced a logic change here: https://github.com/ionic-team/ionic-framework/pull/27344/files#diff-a9009029fec1745d56894683444eca4f67bd76cd37b4d151471579f7efe26fa8L458-R486

• Before the change, it would always wait for componentOnReady (hasLazyBuild(el) && (await deepReady(this.usersElement));) and then wait two frames.
• After the change, if componentOnReady exists (if (hasLazyBuild(el))), it is used instead of waiting two frames. await waitForMount(); never gets executed.

I'm not well versed in the Stencil framework to know what componentOnReady does exactly, but it's not enough for the popover to render fully and for the sizing/positioning logic to work. You still need to wait extra frames.

I confirmed that changing this line from else if into a separate if, so that waitForMount gets executed in addition to deepReady, fixes the issue.

---

As a temporary workaround, setting keepContentsMounted on the popover to true also works, because then the popover is rendered in advance.

[hakimio]

@liamdebeasi do you plan to fix popover bug described in detail by @ReneZeidler above which you introduced in #27344 ? The popover is positioned incorrectly in some cases (especially side: top) with v7.0.6+.

[liamdebeasi]

We do plan to resolve this issue. However, this issue was not introduced in https://github.com/ionic-team/ionic-framework/pull/27344. The original report was filed back in 2022 before the referenced PR was merged. It's possible that the referenced PR uncovered a related buggy behavior, but this issue existed even before that PR.

[ReneZeidler]

The original report was filed back in 2022 before the referenced PR was merged.

@liamdebeasi The original issue was fixed with Ionic 7, probably unknowingly through unrelated changes. It was then reintroduced by the PR I mentioned, possibly with a different root cause but the same symptoms.

• This reproduction from the duplicate issue #26202 originally uses Ionic 6.
• Updating the reproduction to Ionic 7.0.5 with no other changes fixes the issue: https://stackblitz.com/edit/angular-n4d4o2-1nwwhf
• Updating further to Ionic 7.0.6 reintroduces the issue: https://stackblitz.com/edit/angular-n4d4o2-3thxjp

I confirmed locally that changing the one line of code I mentioned in my previous comment does indeed fix the issue introduced by 7.0.6. So the original bug in Ionic 6 that was reported by this and other issues has been fixed already, but a different bug with the same symptoms currently exists in Ionic 7.

[hareshwar1702]

Adding this attribute will fix this issue of calendar cuts and appearing off the screen. Please try this in ion-popover => keep-contents-mounted=“true”. <ion-popover class="popoverDatetime" trigger="open-date-input" keep-contents-mounted="true" show-backdrop="false" [dismissOnSelect]="true" side="top" alignment="start" size="cover" > <ng-template> <ion-datetime #popoverDatetime presentation="date" [max]="maxDate" (ionChange)="targetDate = popoverDatetime.value;"> </ion-datetime> </ng-template> </ion-popover>

[hakimio]

Yes, it's a well known workaround, but best would be if @liamdebeasi could just fix the bug that was introduced in https://github.com/ionic-team/ionic-framework/pull/27344

[liamdebeasi]

Hi there,

Can everyone try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected]

Note: If testing with StackBlitz, you may need to test it in a local project instead. StackBlitz + Angular does not always install these dev builds correctly.

[hakimio]

@liamdebeasi I can confirm that the issue is fixed in 7.3.2-dev.11693321763.15a54694. Thank you 🙂