I am experiencing an issue where the ion-items containing ion-select and ion-datetime-button elements do not have consistent heights. Even though they are all nested within ion-cols with identical properties. The ion-items with ion-datetime-buttons appear to be taller than those with ion-select, causing misalignment within the grid layout. Upon further investigation, I have discovered that setting the height of the ion-item (containing datetimes) and its child div within the shadow-root to 100% resolves the size discrepancy, making all items uniform. However, in my code, I am unable to directly set the height of the shadow-root, resulting in uneven item heights despite specifying a full height for the ion-item itself.
Below is the relevant code snippet:
<ion-grid class="ion-padding">
<!-- Options -->
<ion-row [formGroup]="optionsForm">
<!-- Categories -->
<ion-col size="12" size-sm="4">
<ion-item>
<ion-icon name="pricetag" slot="start"></ion-icon>
<ion-select
interface="popover"
formControlName="categoryIds"
placeholder="Select Categories"
multiple
(ionChange)="doRefresh()"
>
<ion-select-option *ngFor="let category of allCategories" [value]="category.id">
{{ category.name }}
</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<!-- From -->
<ion-col size="12" size-sm="4">
<ion-item>
<ion-icon name="calendar" slot="start"></ion-icon>
<ion-label>From:</ion-label>
<ion-datetime-button datetime="from" required></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
(ionChange)="doRefresh()"
id="from"
locale="en-CH"
presentation="date"
[showDefaultButtons]="true"
formControlName="from"
[max]="optionsForm.get('to')?.value"
>
<span slot="title">Enter the starting point</span>
</ion-datetime>
</ng-template>
</ion-modal>
</ion-item>
</ion-col>
<!-- To -->
<ion-col size="12" size-sm="4">
<ion-item>
<ion-icon name="calendar" slot="start"></ion-icon>
<ion-label>To:</ion-label>
<ion-datetime-button datetime="to" required></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
(ionChange)="doRefresh()"
id="to"
locale="en-CH"
presentation="date"
[showDefaultButtons]="true"
formControlName="to"
[min]="optionsForm.get('from')?.value"
>
<span slot="title">Enter the date of the expense</span>
</ion-datetime>
</ng-template>
</ion-modal>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
I am seeking guidance on how to ensure that the ion-items containing ion-datetime-buttons align in size with those housing ion-select elements.