Search code examples
htmlangularjscordovasafariionic-framework

HTML select "Done" label not showing on Ionic for iOS


I am building an iOS-app using the Ionic-framework. When I use select-elements, I do not get the header with the label "Done" when selecting items in the menu on iOS-native. However it will show up when I use the app in iOS/Safari. Screenshots and code attached. Any input/solutions on this would be much appreciated.

Screenshots:

iOS Safari Screenshot iOS Safari Screenshot

iOS Native/Ionic Screenshot iOS Native/Ionic Screenshot

Markup

<label class="item item-input item-select">
    <div class="input-label">
        Bostadstyp
    </div>
    <select ng-change="addParam('objectType', selectedHouseType)" ng-model="selectedHouseType" ng-options="houseType.id as houseType.label for houseType in houseTypes"></select>
</label>

Solution

  • The Ionic app contains a default code in app.js who hide the keyboard acessory bar, you need to comment this following line: cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    Getting something like this:

    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      //cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    
    }