代码之家 › 专栏 › 技术社区 › saber tabatabaee yazdi

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

alignment ionic-framework angular css html

saber tabatabaee yazdi · 技术社区 · 6 年前

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

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

我如何对齐 可搜索离子选择 具有 离子标签和HIS离子输入 ?

3 回复 | 直到 6 年前

H.Molnar 6 年前

这是一个CSS问题由于离子输入上方的标签,它们低于选择。您需要在离子选择中添加一些上边距。只需阅读一下CSS,它对于设计离子型应用程序非常重要。

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

saber tabatabaee yazdi 6 年前

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

Yushin 6 年前

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

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

推荐文章

Gh05d · 更新到3后无法同步iOS项目

3 年前

Balram dangi · 离子电容器应用程序在ios中只显示白色的空白屏幕

3 年前

deszok · 电容器/离子文件系统写入文件到csv

3 年前

Fernando Aureliano · 无法在Ubuntu上升级离子版

3 年前

Rafael de Castro · 关于内存:在服务上存储json数据,还是在需要时随时获取?

3 年前

Anurag Singh · 通过mediacapture插件录制视频,但在通过文件插件-离子电容器上传时出现问题

3 年前

Andreea Purta · 未定义(读“coords”),使用@ionic native/geolocation-ionic/react

3 年前

plotnik · 发布Cordova插件的离子包装器

3 年前

Alex · 如何在Ionic Pro中设置正确版本的游戏服务

7 年前

Krishanu Mukherjee · 点击paypal时,Ionic 3 IOS应用程序崩溃

7 年前