Ionic 1 select css issue


#1

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.