CODEWITHSUNDEEP
ionic-frameworkionic3
NewTech Lover
NewTech Lover

Reputation: 1263

Button is longer than form inputs in Ionic 3

We are trying to create a login form with rounded inputs. The problem is that after adding border-radius to inputs the login button becomes longer than inputs themselves. Here is the code:

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

Also here are the styles:

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

How can we make the login button on the same width as inputs?

Upvotes: 0

Views: 87

Answers (1)

CodeChanger
CodeChanger

Reputation: 8351

As you added your ion-input in ion-item it will add default 16px padding from left.

So either you add your button into <ion-item> like below 

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

Or you can override ion-item style and change or remove padding like below

default padding : padding-left: 16px;

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

By doing this you can find your ion-input same like login button.

Hope this will helps!

Upvotes: 1

Related Questions