How correct unaligned highlight in input

Ionic Framework ionic-v3
1

Hi evyone .

Following the documentation, i did a simple Login form .

But the highlight is not aligned with the previous (see screenshot).

How can I override this ? Don’t find nothing in ionic saas variable .

The problem is present in the documentation.

Here is my form :

  <form (ngSubmit)="login()" #registerForm="ngForm">
     <ion-row>
     <ion-col>
      <ion-list>
      <ion-item>
        <ion-label floating><ion-icon name="contact" floating item-left></ion-icon>
        Login</ion-label>
        <ion-input type="text"  name="login" [(ngModel)]="credentials.login" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating><ion-icon name="lock" floating item-left></ion-icon>
        Password</ion-label>
        <ion-input type="password"  name="password" [(ngModel)]="credentials.password" required></ion-input>
      </ion-item>
    </ion-list>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col>
    <button ion-button  color="primary" full type="submit" [disabled]="!registerForm.form.valid">Login</button>
  </ion-col>
</ion-row>

thanks for any help :slight_smile:
bad_highlight

2

you could try two or no <ion-list>

3

they are already aligned but the width of those icon are not same that’s why it seems not aligned :joy::joy:
but if you want to do patch then you can do like =>

<ion-list>
    <ion-item>
      <ion-label floating><ion-icon name="contact"  style="font-size: 30px;  " floating item-left></ion-icon>
      Login</ion-label>
      <ion-input type="text"  name="login"  required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating><ion-icon name="lock"  style="font-size: 30px;padding:4px;"  floating item-left></ion-icon>
      Password</ion-label>
      <ion-input type="password"  name="password"  required></ion-input>
    </ion-item>
  </ion-list>
4

Hi, thanks for answer.

No, it is related with this CSS :

 .list-md .item-input:last-child {
   border-bottom: 1px solid #dedede;
}

and

     .list-md > .item-block:last-child ion-label, .list-md > .item-block:last-child .item-inner, .list-md > .item-wrapper:last-child ion-label, .list-md > .item-wrapper:last-child .item-inner {
border-bottom: 0;
 }

I tried to overrid it with :

 .list-md > .item-block:last-child > .item-inner {
  border-bottom: 1px solid #dedede;
 }
.list-md> .item-input:last-child{
   border-bottom: none !important;
}

I have result expected first :
result

but when i focus, it comes again.
focus

I have to override class with “has-item-focus” , but I can’t achieve this yet :confused:

5

i hardcoded like this

.list-md .item-input:last-child{
    border-bottom:none;
}

.list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child, .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
    border-bottom:none;
    -webkit-box-shadow:none;
}

.item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child .item-inner, .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child .item-inner {
    border-bottom-color: #32db64;
    -webkit-box-shadow: inset 0 -1px 0 0 #32db64;
    box-shadow: inset 0 -1px 0 0 #32db64;
}

.item-md.item-input.item-input-has-focus:last-child .item-inner, .item-md.item-input.input-has-focus:last-child .item-inner {
    border-bottom-color: #488aff;
    -webkit-box-shadow: inset 0 -1px 0 0 #488aff;
    box-shadow: inset 0 -1px 0 0 #488aff;
}

.list-md .item-input.item-input-has-focus:last-child, .list-md .item-input.input-has-focus:last-child {
    border-bottom:none;
    -webkit-box-shadow:none;
}

.list-md > .item-block:last-child .item-inner,.list-md > .item-wrapper:last-child .item-inner{
    border-bottom:1px solid #dcdcdc;
}