в ионном приложении, как выровнять комбинированный список с текстовыми полями подряд

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 и его ion-input

Answer 1

это 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 2

Я думаю, что в этом случае использование

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

Answer 3

Это проблема CSS. Из-за меток над ионным входом они ниже, чем выбор.Вам нужно добавить маржинальную вершину к ионам-селектам.Просто ознакомьтесь с CSS, это очень важно для стилизации ионных приложений.

Если вы не хотите использовать CSS, вы можете добавить метку над ion-select или удалить метку из входных данных, но выв любом случае в будущем понадобится CSS.