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

[Saqib92]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.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