Ionic 2: Last item separator in the ion-list gets stretched to left side of the parent container

Ionic Framework ionic-v3
1

Hello ,

My first ionic 2 post here.

Can anyone please help me why the last ion-item separator always get stretched to left side of the parent container?

Is this by design?
If it is by design how can make it align to the previous item?

Please see my code and screenshot of the executed code.

image
Ion-List Item.PNG1206×497 20.7 KB 

<ion-navbar *navbar>
    <ion-title>
        Login
    </ion-title>
</ion-navbar>
<ion-content class="login">
    <ion-list>
        <ion-item>
            <ion-label floating>Email</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="password"></ion-input>
        </ion-item>

    </ion-list>

    <div padding>
        <button block>Sign In</button>
    </div>
    <div>
        <button clear class="center" (click)="openUserRegistration()">Not Registered yet?</button>
    </div>
</ion-content>

Regards,
Savan

2

Hi,

Lot has changed in ionic 2 world since this post, i still experience this behaviour.

Does anyone have any comment on this?

Regards,
Savan

3

Ran across this and thought I’d just chime in real quick. The style you see is for the ion-list. So the top and bottom of the list is stretching all the way to the left. The ion-item(s) inside the list are padded. Try adding the no-lines attribute to see if it gives you what you’d desire.

4

Since the glitch only apply to the last input in the list (or form i suspect), as a fix you can can add a hidden input at the end of a list.

<ion-input [hidden]="true" ></ion-input>

Or in your case:

<ion-navbar *navbar>
    <ion-title>
        Login
    </ion-title>
</ion-navbar>
<ion-content class="login">
    <ion-list>
        <ion-item>
            <ion-label floating>Email</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>

        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="password"></ion-input>
        </ion-item>
        <ion-input [hidden]="true" ></ion-input>
    </ion-list>

    <div padding>
        <button block>Sign In</button>
    </div>
    <div>
        <button clear class="center" (click)="openUserRegistration()">Not Registered yet?</button>
    </div>
</ion-content>

It work for me and i had and still have the exact same problem unless i do this workaround.

Update: actually adding almost anything after the last input seem to make it work. For example, adding this work:

<div class="spacer" style="height: 2px;"></div>

this too:

<ion-label [hidden]="true" ></ion-label>

5

Thanks that works fine as a work around :slight_smile: