ion-datetime-button in ion-item not 100% height

Issue

I have 3 ion-items with ion-select and ion-datetime-button. The ion-items with ion-datetime-button do not have the same height as the one with ion-select. They are all wrapped in an ion-col (with the same properties). The ion-cols has the same height and width, but the ion-items do not.

I have also found out that when I give the ion-item (with the datetimes) a height of 100% and the div inside of the shadow-root a height of 100%, the items are all the same size. However in my code I can not set the shadow-root height, and if it is not set, even if the ion-item has a height of 100%, it will still not take up all the available space.

Finally here is the code:

<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>

How can I achieve that the ion-items with the ion-datetime-buttons have the same size as the ion-items with the ion-select?

Solution

I have found the fix to this issue. It is quite simple: Apply a class to the ion-item with the ion-datetime:

<ion-item class='fixed-datetime-picker'>
  <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>

And give the class 2 properties:

.fixed-datetime-picker {
  height: 100%;
}

.fixed-datetime-picker::part(native) {
  height: 100%;
}

The code gives the ion-item a height of 100%, and also affects its shadow root / native part of the element. Which yields this result:

Answered By - Felix