Question

我们正在尝试创建一个具有四舍五入输入的登录表单。问题在于，在将边界半径添加到输入后，登录按钮变得比输入本身更长。这是代码：

<div class="appForm" ion-fixed padding margin-bottom style="position: absolute !important; top: 0%; bottom: 0%; left: 0; margin-bottom: 1%;">
    <div class="logo">
      <h2>Chat App</h2>
    </div>

    <ion-list style="margin-top: 43% !important">
      <ion-item style="">
        <ion-input class="input-field" [(ngModel)]="email" name="username" type="text" placeholder="Email"></ion-input>
      </ion-item>

      <ion-item>
        <ion-input class="input-field" [(ngModel)]="password" name="password" type="password" placeholder="Password"></ion-input>
      </ion-item>

      <button ion-button block class="login-button" (click)="LoginUser()">Login</button>

      <p class="signin">
        <button ion-button block clear (click)="RegisterPage()">Sign Up</button>
      </p>
    </ion-list>
  </div>

这里还有样式：

ion-item {
    background-color:transparent !important
  }

  .input-field {
    border:2px solid;
    border-radius: 20px;
    color: color($colors, light) !important;
  }

  .login-button {
    text-transform: none;
    border-radius: 20px;
    background:linear-gradient(to right, #DD2476, #FF512F);
    color: color($colors, light);
    margin-top:15px !important;
  }
...
...

如何使登录按钮的宽度与输入的宽度相同？

Answer 1

在ion-input中添加ion-item时，它将从左开始添加默认的16px填充。

因此，您可以像下面这样将button添加到<ion-item>

<ion-item>
   <button ion-button block class="login-button" (click)="LoginUser()">Login</button>
</ion-item>

或者您可以覆盖ion-item样式并像下面那样更改或删除填充

默认填充：左填充：16px；

ion-item {
    background-color:transparent !important;
    padding-left: 0px;
  }

通过此操作，您可以找到与登录按钮相同的离子输入。

希望这会有所帮助！

按钮比Ionic 3中的表单输入要长

1 个答案: