代码之家 › 专栏 › 技术社区 › Felix

离子项中的离子日期时间按钮高度不是100%

ionic7 ionic-framework angular css html

Felix · 技术社区 · 3 年前

I have 3 ion-items with ion-select and ion-datetime-button. 带有“离子日期时间”按钮的离子项目与带有“离子选择”按钮的项目高度不同。它们都被包裹在离子柱中(具有相同的性质)。这个 ion-cols 具有相同的高度和宽度,但 ion-items 不要。

我也发现 when I give the ion-item (with the datetimes) a height of 100% 阴影根内的div高度为100%, the items are all the same size 然而,在我的代码中,我无法设置阴影根高度,如果不设置,即使离子项的高度为100%,它也不会占用所有可用空间。

最后是代码:

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

我如何使带有离子日期时间按钮的离子项与带有离子选择的离子项具有相同的大小?

0 回复 | 直到 3 年前

Felix 3 年前

我已经找到了解决这个问题的办法。这很简单: 将类应用于具有离子日期时间的离子项:

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

并给出类2的属性:

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

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

该代码将离子项的高度设置为100%,并影响其元素的影子根/本机部分。这就产生了这样的结果: