Can't select second select list when side by side


#1

Hi

I have problems with ordering two select lists side by side. I cant seem to click on the second one as the first one always seems to be chosen.

  <form name="purchase_form" class="padding purchase-form" ng-submit="confirm()" novalidate>
    <div class="form-item pickup_time">
      <label class="item item-input item-stacked-label">
          <span class="input-label">Pickup time</span>
          <div class="selects">
            <div class="item">
              <select class="hours" name="hours" ng-model="form.selected_pickup_time_hour" placeholder="10" ng-options="hour for hour in form.pickup_time_hours" required></select>
            </div><span class="separator">:</span><div class="item">
              <select class="minutes" name="minutes" ng-model="form.selected_pickup_time_minute" placeholder="0" ng-options="minute for minute in form.pickup_time_minutes"  required></select>
            </div>
            <div class="times" ng-value="">Last pickup time: {{pickup_time}}, Time to deliver: {{time_to_deliver}} min</div>
          </div>
      </label>
      <div class="error" ng-show="purchase_form.hours.$dirty && purchase_form.hours.$invalid && purchase_form.minutes.$dirty && purchase_form.minutes.$invalid">
        <span ng-show="purchase_form.hours.$error.required">Please select pickup time hour.</span>
        <span ng-show="purchase_form.minutes.$error.required">Please select a pickup time minute.</span>
      </div>
    </div>
    <button type="submit" class="button button-block purcahse" ng-disabled="purchase_form.$invalid">Make Purchase</button>
  </form>

Any help appreciated.


#2

So it either angular or ionic that selects the first element when you push somewhere when the elements looks like this.

<div class="form-item">
<label class="item item-input item-stacked-label"></label>
<div class="item"></div>
</div>

I solved it by removing alla divs and spans surrounding the select lists and made my own divs and classes.