CODEWITHSUNDEEP
ionic3
U rock
U rock

Reputation: 775

Issue with ion-input border bottom

I have form fields and I am validating those fields. If validation failed I am showing a border at the bottom with a red line but it doesn't fully cover the ion-input.

  <ion-item>
          <ion-label floating>Vorname</ion-label>
          <ion-input formControlName="vorname" type="text" [class.invalid]="registerform.controls.vorname.touched && registerform.controls.vorname.errors"></ion-input>
        </ion-item>


 .invalid{
      border-bottom: 1px solid rgba(255, 0, 0, 0.71);
    }

enter image description here

Upvotes: 0

Views: 9505

Answers (1)

Utpaul
Utpaul

Reputation: 2007

First of all you need to override in variable.scss android material design. Here i paste following code:

$text-input-highlight-color-valid:#fff;
$text-input-highlight-color-invalid:#fff;

And also edit in .scss

  .invalid{
    border-bottom: 1px solid rgba(255, 0, 0, 0.71);
  }

  .item-md.item-block .item-inner {
    padding-right: 0px !important;
    border-bottom: #fff !important;
  }

Then all is ok

Upvotes: 1

Related Questions