My app is running fine in iOS and most of Android phone. But got the select alignment issue in some devices.
The correct one is like this:
The wrong one:
My html code:
<form name="profileForm" novalidate="" class="padding">
<label class="item item-input item-select top-right-roundcorner">
<span class="input-label gray-label">Title<br>稱謂</span>
<select ng-model="data.user.title" id="1" data-depenency="2">
<option ng-repeat="title in titles"
ng-value="{{title}}"
ng-selected="title === data.user.title">{{title}}</option>
</select>
</label>
Related css:
.item-select select
{
right: auto;
padding: 13px 45px 15px 0px;
direction: ltr;
}
label.top-right-roundcorner {
padding:0;
margin: 5px 0;
border: 1px solid $primary-color;
border-top-right-radius: $round-corner-radius;
}
label.transparent-border {
padding:0;
margin: 5px 0;
border: none;
}
@mixin inputlabel {
margin-right: 15px;
//padding:2px;
color: #fff;
text-align: center;
font-size: 0.75em;
}
.gray-label {
@include inputlabel;
background-color: $stable;
}
.orange-label {
@include inputlabel;
background-color: $primary-color;
}
.transparent-label {
@include inputlabel;
color: $stable;
background-color: transparent;
}
.item-bottom-border:first-child {
border-top: none;
}
.item-bottom-border {
border-style: hidden;
border-top: 1px solid $primary-color;
}
img.bottom-button {
width:100px;
height: auto;
}
I need advice on how to debug the issue. Thanks.