Popover open to top / appearing off screen on bottom of a page

Ionic Framework
1

I want to select a date at the bottom of a modal with a datetime popover, but it’s opening to the bottom and so it’s disappearing. I’m using side="left" , but with the popover side="top" it’s possible to get the popover over the date button, but not opening to the top.
Can I open it to the top or align it at the bottom?

capture_001_21012022_115227

2 
ion-popover.popoverName {
  --offset-y: -100px !important;
}

where 100px can be modified depending on your needs

3

Thanks, I tried

ion-popover.popoverDatetime {
    --offset-y: -100px !important;
}

in the scss-file and in the global.scss , but it doesn’t work so far

4

Check the classname in your code

5

Oh, I’ve forgotten to post the code before:

<ion-popover trigger="open-date-input" show-backdrop="false" [dismissOnSelect]="true" side="left">
      <ng-template>
        <ion-datetime #popoverDatetime presentation="date" [max]="maxDate"
          (ionChange)="targetDate = popoverDatetime.value;">
        </ion-datetime>
      </ng-template>
    </ion-popover>

Isn’t popoverDatetime the right name?

6

I will check asap, I’m going out now

7

nope, you are not using the right classname,
in your example you must use something like:

    <ion-popover class="popoverDatetime"  trigger="open-date-input" 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>
1 Like
8

Oh :see_no_evil: I see, of course. Thanks for your patience and quick response time!

1 Like
9

I guess 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" show-backdrop="false" [dismissOnSelect]="true" side="top" alignment="start" size="cover"  keep-contents-mounted="true" >
      <ng-template>
        <ion-datetime #popoverDatetime presentation="date" [max]="maxDate"
          (ionChange)="targetDate = popoverDatetime.value;">
        </ion-datetime>
      </ng-template>
    </ion-popover>
1 Like