After upgrading to Ionic 7, we encountered text truncation issues when displaying the ion-datetime.
Detailed information on the issue and relevant source code excerpts are attached in the bellow. If there are any mistakes in our implementation or if there are solutions to this, could you please advise?
The right edge is not displayed
<ion-popover trigger="S_01-004_bd" triggerAction="click" style="--width: 85%;">
<ng-template>
<ion-datetime id="birthday" class="input-date" displayFormat="YYYY.M.D" value="{{pickerDate || '1980-01-01'}}" (click)="onClickBirthday()"
presentation="date"
#popOverValue
mode="ios"
[showDefaultButtons]="true"
doneText="設定"
cancelText="キャンセル"
(ionChange)="birthday.date.setValue(popOverValue.value)"
preferWheel="true"
>
</ion-datetime>
</ng-template>
</ion-popover>
The width becomes narrower from the second time onwards.
<ion-popover trigger="S_01-004_bd" triggerAction="click" style="--width: 80%;">
<ng-template>
<ion-datetime id="birthday" class="input-date" displayFormat="YYYY.M.D" value="{{pickerDate || '1980-01-01'}}" (click)="onClickBirthday()"
presentation="date"
#popOverValue
mode="ios"
[showDefaultButtons]="true"
doneText="設定"
cancelText="キャンセル"
(ionChange)="birthday.date.setValue(popOverValue.value)"
>
</ion-datetime>
</ng-template>
</ion-popover>
-
First time
-
From the second time onwards
