Ionic 2: Inconsistent Top-Padding for select item and text item


#1

Hi Guys,

When using and ion-list, the top-padding is inconsistent between different child elements?
Please see below screenshot it shows more padding between input elements and shows less padding for a select element?

Can anyone help me with this?

<ion-navbar *navbar>
  <ion-title>Register User</ion-title>
</ion-navbar>

<ion-content class="user-registration">
    <ion-list>
        <ion-item>
            <ion-label floating>Name</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Email</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Country</ion-label>
            <ion-select [(ngModel)]="country">
                <ion-option value="IND">India</ion-option>
                <ion-option value="AUS">Australia</ion-option>
                <ion-option value="SRI">Srilanka</ion-option>
                <ion-option value="N">New Zealand</ion-option>
                <ion-option value="SA">South Africa</ion-option>
                <ion-option value="UK">United Kingdom</ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="password"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Confirm Password</ion-label>
            <ion-input type="password"></ion-input>
        </ion-item>

    </ion-list>
    <div padding>
        <button block>Submit</button>
    </div>
</ion-content>

#2

I’m also facing the same problem.


#3

Me too. Something like a “top-padding” property for ion-select may be very useful here.


#4

I’ve also experienced this problem. Any one know of a quick way to fix this issue?