List + Inset + Select = padding-left: 16px


#1

I’m using RC2 and in forms, and I’ve a problem with item when using inset. Despite the inset flag, the select is still 16px padded to the left. The following css attribute seems to be missing to the select only.

.list-md[inset] .item-input {
    padding-right: 0;
    padding-left: 0;
}

Here is the code:

<ion-content>
<div class="middle-align">
    <ion-grid>
        <form [formGroup]="registerForm" (ngSubmit)="onSubmit(registerForm.value)">
            <ion-row>
                <ion-col>
                    <ion-list inset>
                        <ion-item>
                            <ion-label floating>Name</ion-label>
                            <ion-input type="text" block id="username" [formControl]="usernameInput"></ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Type</ion-label>
                            <ion-select [formControl]="userTypeInput">
                                <ion-option value="0">Individual</ion-option>
                                <ion-option value="1">Professional</ion-option>
                            </ion-select>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Email</ion-label>
                            <ion-input type="email" [formControl]="emailInput"></ion-input>
                        </ion-item>
                    </ion-list>
                </ion-col>
            </ion-row>
        </form>
    </ion-grid>
</div>

I wish I could have attached a picture but here is what the result looks like (I hope it’s understandable)

Name

<- 16px ->Type
<- 16px ->…

Email

Does any of you have the same issue? Do you know if this is a bug or if this is the normal behavior? It would be a bit odd if I had to add a custom CSS just to align this item.