Question

如您在这张图片中看到的

我的html代码是这样的：

       <ion-row>
        <ion-col>
          <ion-item>
            <searchable-ion-select isModal="true" name="country" valueField="code" [(ngModel)]="country" title="Country"
              (onChange)="countrySelected()" textField="name" [items]="countries">
            </searchable-ion-select>
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item>
            <ion-label class="item-name" stacked>Phone number*</ion-label>
            <ion-input [(ngModel)]="phone" (ngModelChange)="onFieldChanged()" type="text" required name="phoneNumber"></ion-input>
          </ion-item>
          <ion-row *ngIf="!isPhoneFormat && false">
            Invalid format!
          </ion-row>
        </ion-col>
        <ion-row *ngIf="!isNameFormat && false">
          Invalid format for first name or last name
        </ion-row>
      </ion-row>

这些不是连续的，而是连续的姓氏

      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label class="item-name" stacked>First name*</ion-label>
            <ion-input [(ngModel)]="firstName" (ngModelChange)="onFieldChanged()" type="text" required name="firstName"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item>
            <ion-label class="item-name" stacked>Last name*</ion-label>
            <ion-input [(ngModel)]="lastName" (ngModelChange)="onFieldChanged()" type="text" required name="lastName"></ion-input>
          </ion-item>
        </ion-col>
        <ion-row *ngIf="!isNameFormat && false">
          Invalid format for first name or last name
        </ion-row>
      </ion-row>

我如何将 searchable-ion-select 与 ion-label及其离子输入对齐？

Answer 1

这是CSS问题由于离子输入上方的标签，因此它们低于所选标签。您需要在离子选择器上添加一些边距顶部。只需阅读CSS，这对于设计离子应用程序的样式非常重要。

如果您不想使用CSS，则可以在ion-select上方添加标签，或从输入中删除标签，但是无论如何将来都将需要CSS。

Answer 2

此CSS：

.select-searchable{
    padding-top: 3px;
    border: 2px solid #cfcfcf;
    border-radius: 8px;
    margin-top: 19px;
}

.select-searchable-label,.select-searchable-value{
    margin: 7px !important;
}

css可以应用我所需要的。

Answer 3

在这种情况下，我认为使用

<ion-grid>
  <ion-row>
    <ion-col col-6>This column will take 6 columns</ion-col>
    <ion-col col-6>This column will take 6 columns</ion-col>
  </ion-row>
</ion-grid>

将帮助您将输入字段的宽度设置为百分比，以便可以缩放至ion-col当前的当前大小。

在ionic应用程序中，如何将组合框与一行文本字段对齐

3 个答案: