HTML select the Done label, which is not displayed on Ionic for iOS

Question

I am creating an iOS application using the Ionic-framework. When I use select elements, I don’t get a heading labeled “Finish” when I select items in the menu on iOS-native. However, it will appear when I use the application in iOS / Safari. Screenshots and code are attached. Any input / solutions on this would be greatly appreciated.

Screenshots:

Safari screenshot for iOS

IOS Source / Ion Snapshot

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> 

Answer 1

The ionic application contains the default code in app.js that hides the acessory bar keyboard, you need to comment on the following line: cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true);

Something like that:

 // 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); } 

Answer 2

Regarding the @emccracken comment, according to the Ionic command, the reason for hideKeyboardAccessoryBar is "because native applications rarely have an access panel. Give that the application is built using web technologies and is not native."

You can show and hide the dashboard on demand, which is explained here . Taking $ timeouts from the directive worked better for me. This is what mine looks like.

 .directive('select', function() { return { restrict: 'E', link: function(scope, element, attrs) { element.bind('focus', function(e) { if (window.cordova && window.cordova.plugins.Keyboard) { // console.log("show bar (hide = false)"); cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); } }); element.bind('blur', function(e) { if (window.cordova && window.cordova.plugins.Keyboard) { // console.log("hide bar (hide = true)"); cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } }); } }; })