Кнопка длиннее формы ввода в Ionic 3

Question

Мы пытаемся создать форму входа с закругленными вводами.Проблема в том, что после добавления border-radius для входов кнопка входа становится длиннее, чем сами входы.Вот код:

<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 и изменить или удалить заполнение, как показано ниже

заполнение по умолчанию: padding-left: 16px;

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

Делая этовы можете найти свой ion-input такой же, как кнопка входа в систему.

Надеюсь, это поможет!