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

Posted 2021-03-30

正如你在这张图片中看到的那样

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

如何将可搜索离子选择与离子标记和离子输入对齐？

答案

这是一个CSS问题由于离子输入上方的标签，它们低于选择。您需要在离子选择中添加一些margin-top。只需阅读CSS，它对于离子应用程序的样式非常重要。

如果您不想使用CSS，可以在离子选择上方添加标签，或者从输入中删除标签，但无论如何您将来都需要CSS。

另一答案

这个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可以应用我需要的东西。

另一答案

我认为在这种情况下使用

<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的当前当前大小。